/* ============================================================ Creativepool · SEO editorial content (.seo-editorial) Styles the editorial block that sits between the search bar and the result listings on /top-ranked// and the /-company / /-agency SEO landing pages. Tracker 4246 · client-approved design "Variant B — Inverted rhythm" (claude.ai/design handoff "CP Directory Band Variants"): intro WHITE → how-to-choose GREY → FAQ WHITE → directory GREY Homepage palette only: ink #25262a · body #55575c · muted #8f9296 · green #7cbaaa (hover #6aa596) · lines #e2e2e2 · band grey #f0f0f0. Nothing heavier than weight 600 (eyebrows); headings are 300. Scope: ONLY .seo-editorial / .cp-dir and descendants. No global selectors, no body/main/page chrome changes. Font: Proxima Nova only (inherits the site default). ============================================================ */ /* Design tokens, namespaced with the --se- prefix so they can't collide. Declared on :root because they are consumed by TWO separate subtrees: .seo-editorial (premain bands) and .cp-dir (inside section.main). Values from the handoff spec table (mock 1e). */ :root { --se-green: #7cbaaa; /* eyebrows, FAQ numbers, chevrons */ --se-green-dd: #6aa596; /* hover step */ --se-ink: #25262a; /* headings, lede, FAQ questions */ --se-body: #55575c; /* body copy, FAQ answers */ --se-muted: #8f9296; /* helper text */ --se-line: #e2e2e2; /* dividers, tile borders */ --se-band: #f0f0f0; /* grey bands (site standard grey) */ } .seo-editorial { /* Font is inherited from (Proxima Nova). No font-family override here, no extra Google Fonts: per design handoff and explicit client instruction the only font on these pages is Proxima Nova. */ color: var(--se-body); margin-top: 0; } .seo-editorial * { box-sizing: border-box; } .seo-editorial a { color: inherit; text-decoration: none; } /* The centred text column used inside every band: 880px content + 40px side padding, matching the handoff mock (band padding 72px 40px, inner max-width 880px). */ .seo-editorial .seo-wrap { max-width: 960px; margin: 0 auto; padding: 0 40px; } /* Shared eyebrow label above each block (handoff: 14px / 600 / .03em / caps / green). */ .seo-editorial .seo-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--se-green); margin: 0; } /* Shared full-bleed breakout for the three editorial bands. These render via $page->premain as direct children of (siblings of .main_wrap, see HTML/layouts/default.php), so the 50%/-50vw trick resolves against the full-width body and reliably reaches both viewport edges. Do NOT reuse this inside section.main — columns there can be floated next to the ad rail and clipped by .main_wrap { overflow: hidden } (that is why .cp-dir below is contained, not broken out). */ .seo-editorial .seo-introband, .seo-editorial .seo-choose, .seo-editorial .seo-faqband { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; } /* ============================================================ 1. Intro band (.seo-introband) — WHITE, flat, full-bleed. ============================================================ */ .seo-editorial .seo-introband { background: #ffffff; padding: 62px 0; /* 4246 #18594 item c */ } .seo-editorial .seo-lede { font-size: 28px; line-height: 1.4; /* 4246 #18594 item a */ font-weight: 300; color: var(--se-ink); margin: 18px 0 0; text-wrap: pretty; } /* Weight cap 400 (4246 #18562 item 7). */ .seo-editorial .seo-lede b, .seo-editorial .seo-lede strong { font-weight: 400; } /* 4246 #18594 item a: the intro text lives in a

, and the global `p { line-height:1.6 }` directly targets it (beating the 1.4 inherited from .seo-lede), so set 1.4 on the

itself. */ .seo-editorial .seo-lede p { margin: 0; line-height: 1.4; } .seo-editorial .seo-lede p + p { margin-top: 14px; } /* ============================================================ 2. "How to choose" band (.seo-choose) — GREY, full-bleed. ============================================================ */ .seo-editorial .seo-choose { background: var(--se-band); color: var(--se-body); padding: 62px 0; /* 4246 #18594 item c */ } .seo-editorial .seo-choose h2 { font-size: 30px; font-weight: 300; line-height: 1.2; margin: 14px 0 16px; color: var(--se-ink); } /* 4246 #18594 item b: the "How to choose" label must match the intro eyebrow ("Creative Sector Companies"/"Rankings") exactly. It already carries .seo-eyebrow, but the generic .seo-choose p rule below (17px body) outweighs .seo-eyebrow on specificity, so restate the eyebrow here to win. */ .seo-editorial .seo-choose .seo-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--se-green); margin: 0; } /* 4246 #18594: admin-only "edit this page's SEO" bar under the editorial. Never shown to visitors. */ .seo-editorial .seo-adminbar { background: #25262a; padding: 12px 0; } .seo-editorial .seo-adminbar .seo-wrap { display: flex; align-items: center; gap: 12px; } .seo-editorial .seo-adminbar__tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #25262a; background: var(--se-green); padding: 2px 7px; border-radius: 3px; } .seo-editorial .seo-adminbar a { color: #fff; text-decoration: underline; font-size: 14px; } .seo-editorial .seo-choose p { font-size: 17px; font-weight: 400; line-height: 1.65; color: var(--se-body); margin: 0; text-wrap: pretty; } .seo-editorial .seo-choose p + p { margin-top: 14px; } .seo-editorial .seo-choose p b, .seo-editorial .seo-choose p strong { font-weight: 400; } /* ============================================================ 3. FAQ (.seo-faqband → .seo-faqwrap → .seo-faq) — WHITE band. Uses native

for accessibility + no-JS. ============================================================ */ .seo-editorial .seo-faqband { background: #ffffff; padding: 62px 0; /* 4246 #18594 item c */ } .seo-editorial .seo-faqhead { font-size: 30px; font-weight: 300; line-height: 1.2; color: var(--se-ink); margin: 14px 0 10px; } .seo-editorial .seo-faq { border-top: 1px solid var(--se-line); } .seo-editorial .seo-faq__item { border-bottom: 1px solid var(--se-line); } /* The question row is a

. Hide the default marker; inherit body font (Proxima Nova). */ .seo-editorial .seo-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 22px; padding: 20px 4px; font-family: inherit; font-size: 17px; font-weight: 400; color: var(--se-ink); transition: color .2s; } .seo-editorial .seo-faq__q::-webkit-details-marker { display: none; } .seo-editorial .seo-faq__q::marker { display: none; content: ""; } .seo-editorial .seo-faq__q:hover { color: var(--se-green-dd); } .seo-editorial .seo-faq__q:focus-visible { outline: 2px solid var(--se-green-dd); outline-offset: 2px; } .seo-editorial .seo-faq__num { flex: none; width: 22px; font-size: 13px; font-weight: 400; color: var(--se-green); } .seo-editorial .seo-faq__text { flex: 1; min-width: 0; } .seo-editorial .seo-faq__chev { margin-left: auto; flex: none; width: 16px; height: 16px; color: var(--se-green); transition: transform .25s ease; } .seo-editorial .seo-faq__item[open] .seo-faq__chev { transform: rotate(180deg); } /* Answer aligns with the question text (4px row padding + 22px number + 22px gap = 48px). */ .seo-editorial .seo-faq__panel { padding: 0 4px 20px 48px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--se-body); max-width: 768px; /* 720px text + 48px left offset, per mock */ } .seo-editorial .seo-faq__panel p { margin: 0; } .seo-editorial .seo-faq__panel p + p { margin-top: 12px; } /* ============================================================ Mobile (<= 760px) — metrics from handoff mock 1d (390px). ============================================================ */ @media (max-width: 760px) { .seo-editorial .seo-wrap { padding: 0 22px; } .seo-editorial .seo-introband, .seo-editorial .seo-choose, .seo-editorial .seo-faqband { padding: 44px 0; } .seo-editorial .seo-eyebrow { font-size: 13px; } .seo-editorial .seo-lede { font-size: 20px; line-height: 1.55; margin-top: 14px; } .seo-editorial .seo-choose h2 { font-size: 23px; margin: 12px 0 12px; } .seo-editorial .seo-choose p { font-size: 15px; } .seo-editorial .seo-faqhead { font-size: 23px; margin: 12px 0 6px; } .seo-editorial .seo-faq__q { font-size: 15px; gap: 14px; padding: 16px 2px; } .seo-editorial .seo-faq__num { width: 18px; font-size: 12px; } .seo-editorial .seo-faq__chev { width: 14px; height: 14px; } .seo-editorial .seo-faq__panel { padding: 0 2px 16px 34px; font-size: 15px; } } /* ============================================================ DISCIPLINE DIRECTORY (.cp-dir) — GREY band, white tiles. Shared by linklist_top25_companies.php (/top-ranked), linklist_types_companies.php (/companies/company-directory) and linklist_titles_tiles.php (/top-25/). Variant B: the section is a #f0f0f0 band ("the buttons are over grey"); tiles are flat white cards with a 1px #e2e2e2 border that turns green on hover. Inner content is centred at 880px to align with the editorial text column. NOTE: unlike the editorial bands above, .cp-dir renders INSIDE section.main. On /top-25/ and the people listings that column is floated next to the right ad rail, and .main_wrap clips overflow — so no 100vw breakout here. The band FILLS its column; on the ad-free directory/top-ranked pages (centred main.full-width) it blends seamlessly into the identical #f0f0f0 page background, which gives the full-bleed look of the mock. ============================================================ */ .cp-dir { background: var(--se-band, #f0f0f0); /* Horizontal padding comes from the parent column (section.main.full-width already pads 0 40px) - side padding here would double-inset the content and break the 880px alignment with the editorial text column above. */ padding: 72px 0 90px; } .cp-dir__head, .cp-dir__grid, .cp-dir--grouped .cp-dir__group { max-width: 880px; margin-left: auto; margin-right: auto; } .cp-dir__head { text-align: left; } .cp-dir__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--se-green, #7cbaaa); margin: 0 0 14px; } .cp-dir__title { font-size: 30px; font-weight: 300; line-height: 1.2; color: var(--se-ink, #25262a); margin: 0 0 8px; text-align: left; text-wrap: balance; } .cp-dir__sub { font-size: 14px; line-height: 1.55; color: var(--se-muted, #8f9296); margin: 0 0 26px; } .cp-dir__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cp-dir__tile { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #ffffff; border: 1px solid var(--se-line, #e2e2e2); padding: 14px 16px; text-decoration: none; transition: border-color .18s; } .cp-dir__tile:visited { color: inherit; } .cp-dir__name { flex: 1 1 auto; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--se-body, #55575c); text-decoration: none; } .cp-dir__chev { flex: none; width: 13px; height: 13px; color: var(--se-green, #7cbaaa); } .cp-dir__tile:hover { border-color: var(--se-green, #7cbaaa); } /* Keyboard focus needs a stronger affordance than the 1px border swap. */ .cp-dir__tile:focus-visible { border-color: var(--se-green, #7cbaaa); outline: 2px solid var(--se-green-dd, #6aa596); outline-offset: 2px; } @media (max-width: 760px) { .cp-dir__grid { grid-template-columns: repeat(2, 1fr); } .cp-dir { padding: 44px 0 60px; } .cp-dir__eyebrow { font-size: 13px; } .cp-dir__title { font-size: 23px; } .cp-dir__sub { font-size: 13px; margin-bottom: 18px; } .cp-dir__tile { padding: 13px 15px; } } @media (max-width: 460px) { .cp-dir__grid { grid-template-columns: 1fr; } } /* Grouped variant — industry section headers between tile grids (used by /top-25/). */ .cp-dir--grouped .cp-dir__group { margin-top: 30px; } .cp-dir--grouped .cp-dir__group:first-of-type { margin-top: 18px; } .cp-dir--grouped .cp-dir__grouptitle { font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--se-ink, #25262a); margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--se-line, #e2e2e2); } .cp-dir--grouped .cp-dir__group .cp-dir__grid { margin-top: 14px; } /* ============================================================ No-ads layout (4246). The pages that render the .seo-editorial block no longer emit the ZONE_PPL_SEO_SIDE right-column ads; the layout then adds .full-width to section.main (see HTML/layouts/default.php — the ads container is not rendered at all). Centre the content column so listings align with the 880px editorial text column. ============================================================ */ body.peopleseo section.main.full-width, body.top25Page section.main.full-width { float: none; margin: 0 auto; max-width: 960px; padding: 0 40px; } @media (max-width: 760px) { body.peopleseo section.main.full-width, body.top25Page section.main.full-width { padding: 0 22px; } }