/ text on other pages relies
on faux-italic — disabling weight synthesis alone kills faux-bold everywhere while
leaving that faux-italic intact. */
html {
font-synthesis-weight: none;
/* grayscale antialiasing — render text the way the design mockups do; removes the
subpixel colour-fringing that makes edges read "much sharper" than the mockup.
Inherited from the root → every page. -webkit-/-moz-osx- are Mac/WebKit-only
(Windows/Firefox-on-Windows ignore them and keep their native rendering). */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* the ✓ tick (U+2713) is not in Sofia Pro, so it renders from a fallback font with
no bold cut; the global font-synthesis-weight:none above left it thin. Re-allow
weight synthesis on the tick pseudo-elements only so they faux-bold as in the
mockup — real text still uses real cuts. */
.qa-restyle .flist li::before,
.qa-restyle .checks li::before {
font-synthesis-weight: auto;
}
/* secondary / outline CTAs (mockup .btn.btn-outline) — page-scoped & self-contained:
the shared .qa-restyle layer ships only the solid .rda_btn, and a bare .btn-outline
does not collide with Bootstrap's .btn-outline-* variants. Compound
.living-insights-page.qa-restyle prefix (0,3,0) out-specifies the red body-link rule
above (0,2,1) so the label stays ink, not brand-dark. Regular size by default
(hero + Talk-to-us "Download Factsheet"); .btn-outline--sm is the small variant
(mockup .btn-sm) for the privacy CTAs above Talk to us. Home Blog "See more"
wears it too (its wrapper carries .qa-restyle for the tokens). */
#rdanews_wrap .btn-outline,
.living-insights-page.qa-restyle .btn-outline,
.geotribes-page.qa-restyle .btn-outline,
.about-page.qa-restyle .btn-outline,
.consumer-data-page.qa-restyle .btn-outline,
.geosmart-page.qa-restyle .btn-outline,
.explorer-page.qa-restyle .btn-outline {
display: inline-block;
padding: 12px 24px;
border: 1.5px solid var(--line);
border-radius: 4px;
background: #fff;
color: var(--ink);
font-size: 15.52px; /* mockup .btn = .97rem @16px */
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
#rdanews_wrap .btn-outline:hover,
.living-insights-page.qa-restyle .btn-outline:hover,
.geotribes-page.qa-restyle .btn-outline:hover,
.about-page.qa-restyle .btn-outline:hover,
.consumer-data-page.qa-restyle .btn-outline:hover,
.geosmart-page.qa-restyle .btn-outline:hover,
.explorer-page.qa-restyle .btn-outline:hover {
border-color: var(--ink);
color: var(--ink);
}
.living-insights-page.qa-restyle .btn-outline--sm,
.about-page.qa-restyle .btn-outline--sm,
.consumer-data-page.qa-restyle .btn-outline--sm,
.geosmart-page.qa-restyle .btn-outline--sm,
.explorer-page.qa-restyle .btn-outline--sm {
padding: 8px 16px;
font-size: 14.4px; /* mockup .btn-sm = .9rem @16px */
}
/* hero heading — LI mockup .site-hero h1 = clamp(2.3rem,6.2vw,4.3rem) @16px */
#banner_landing_wrap.living-insights-page .primary-heading {
font-size: clamp(36.8px, 6.2vw, 68.8px);
letter-spacing: -0.015em;
font-weight: 300;
line-height: 1;
}
/* hero eyebrow ("4/") — LI mockup .eyebrow = .95rem @16px */
#banner_landing_wrap.living-insights-page .counter {
display: block;
padding: 0;
margin-bottom: 16px;
color: var(--ink);
font-size: 15.2px;
font-weight: 400;
letter-spacing: 0.04em;
}
#banner_landing_wrap.living-insights-page .counter::before {
font-weight: 400;
}
#banner_landing_wrap.living-insights-page .counter .dot-in-center-of-zero::after {
font-size: inherit;
}
/* hero sub ("Humanise corporate data.") — LI mockup .sub = clamp(1.05rem,2.4vw,1.7rem)
@16px. Scoped to .primary-heading so it hits ONLY the h1 sub: the live LI hero
reuses .banner-description on a second, standalone tagline below the image,
which must keep its live size/left-align (the hero is kept-as-live). */
#banner_landing_wrap.living-insights-page .primary-heading .banner-description {
color: var(--ink);
font-size: clamp(16.8px, 2.4vw, 27.2px);
font-weight: 300;
line-height: 1.18;
letter-spacing: normal;
text-align: right;
padding-bottom: 0.08em;
}
/* About hero ramp — clone of the LI hero above (the about mockup hero shares the
same scale: .site-hero h1 = clamp(2.3rem,6.2vw,4.3rem), weight 300). Without
this, About's h1 fell through to the legacy #banner_landing_wrap .primary-heading
(clamp 35→90px, -3px tracking, default weight) — visibly bigger and heavier than
the mockup and the sibling restyled heroes. The hero carries only the "About Us"
title (the right-aligned .banner-description tagline was removed to match the
mockup) plus the .hero-tag positioning line below the banner image. */
#banner_landing_wrap.about-page .primary-heading {
font-size: clamp(36.8px, 6.2vw, 68.8px);
letter-spacing: -0.015em;
font-weight: 300;
line-height: 1;
}
#banner_landing_wrap.about-page .counter {
display: block;
padding: 0;
margin-bottom: 16px;
color: var(--ink);
font-size: 15.2px;
font-weight: 400;
letter-spacing: 0.04em;
}
#banner_landing_wrap.about-page .counter::before {
font-weight: 400;
}
#banner_landing_wrap.about-page .counter .dot-in-center-of-zero::after {
font-size: inherit;
}
/* Human Insights Data hero ramp — clone of the About / LI hero blocks (the
human-insights-data mockup hero shares the same scale: .site-hero h1 =
clamp(2.3rem,6.2vw,4.3rem), weight 300; .eyebrow = .95rem, weight 400).
Without this, consumer-data's h1 + counter fell through to the legacy
#banner_landing_wrap .primary-heading (clamp 35→90px, -3px tracking, default
weight) — visibly bigger/heavier than the mockup and the sibling restyled
heroes. The hero is kept-as-live (the standalone .banner-description tagline
below the image isn't in the mockup, left untouched). */
#banner_landing_wrap.consumer-data-page .primary-heading {
font-size: clamp(36.8px, 6.2vw, 68.8px);
letter-spacing: -0.015em;
font-weight: 300;
line-height: 1;
}
/* centre the hero→first-section divider: the body section gives 56px above the
heading (padding-top), so match the hero's bottom gap to 56px (base #banner
is 20px) — divider sits vertically midway. ID+class (1,1,0) beats base ID. */
#banner_landing_wrap.consumer-data-page {
margin-bottom: 56px;
}
#banner_landing_wrap.consumer-data-page .counter {
display: block;
padding: 0;
margin-bottom: 16px;
color: var(--ink);
font-size: 15.2px;
font-weight: 400;
letter-spacing: 0.04em;
}
#banner_landing_wrap.consumer-data-page .counter::before {
font-weight: 400;
}
#banner_landing_wrap.consumer-data-page .counter .dot-in-center-of-zero::after {
font-size: inherit;
}
/* Living Insights mockup type ramp — the shared .qa-restyle sizes derive from the
Intelligence mockup and run ~5% smaller than the LI mockup for the inherited
components; re-assert the LI-mockup px (rem×16, body literal 16.5px) page-scoped
so LI honours its own mockup precisely. The LI-specific components (.chan-*,
.flist, .subhead, .micro, hero, .btn-outline) already carry LI-mockup px → reused. */
.living-insights-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* mockup .lead = 1.03rem */
/* mockup .what-list li = .96rem */
/* mockup .dcard h3 = 1.05rem */
/* mockup .dcard p = .92rem (also drives .chan-sub/.chan-lab, exactly as the mockup cascade does) */
/* mockup .chan-head h3 = 1.18rem — listed after .dcard h3 so channel titles win source-order */
/* mockup .checks li = .93rem */
/* mockup .call-big = 1.5rem */
/* mockup .btn = .97rem (Book a demo, Message us) */
}
.living-insights-page.qa-restyle section {
font-size: 16.5px;
}
.living-insights-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.living-insights-page.qa-restyle .section-lead {
font-size: 16.48px;
}
.living-insights-page.qa-restyle .what-list li {
font-size: 15.36px;
}
.living-insights-page.qa-restyle .dcard h3 {
font-size: 16.8px;
}
.living-insights-page.qa-restyle .dcard p {
font-size: 14.72px;
}
.living-insights-page.qa-restyle .chan-head h3 {
font-size: 18.88px;
}
.living-insights-page.qa-restyle .checks li {
font-size: 14.88px;
}
.living-insights-page.qa-restyle .call-big {
font-size: 24px;
}
.living-insights-page.qa-restyle .rda_btn {
font-size: 15.52px;
}
.living-insights-page.qa-restyle .form { /* mockup .form label = .85rem */
/* mockup .form input = .95rem */
/* mockup .micro = .83rem */
}
.living-insights-page.qa-restyle .form .field-label label:not(.error) {
font-size: 13.6px;
}
.living-insights-page.qa-restyle .form input, .living-insights-page.qa-restyle .form textarea {
font-size: 15.2px;
}
.living-insights-page.qa-restyle .form .micro {
font-size: 13.28px;
}
/* geoTribes Segments mockup type ramp — clone of the Living Insights ramp above
(both mockups share one px scale; px = mockup_rem × 16, body 16.5px). Page-scoped
to .geotribes-page (used by segments.php only) so segments honours its mockup
precisely without touching the shared layer or the other rolled-out pages.
See [[project_intelligence_fontscale]] — by formula, NOT fontscale.py. */
.geotribes-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* Postcode Profiler form's "Top geoTribes Segments" heading (matches homepage) */
/* mockup .lead = 1.03rem */
/* mockup .what-list li = .96rem */
/* mockup .dcard h3 = 1.05rem */
/* mockup .dcard p = .92rem */
/* mockup .checks li = .93rem */
/* mockup .call-big = 1.5rem */
/* mockup .btn = .97rem */
/* mockup .micro = .83rem */
}
.geotribes-page.qa-restyle section {
font-size: 16.5px;
}
.geotribes-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.geotribes-page.qa-restyle .profile-finder-wrap .secondary-heading {
font-size: 16px;
white-space: nowrap;
}
.geotribes-page.qa-restyle .section-lead {
font-size: 16.48px;
}
.geotribes-page.qa-restyle .what-list li {
font-size: 15.36px;
}
.geotribes-page.qa-restyle .dcard h3 {
font-size: 16.8px;
}
.geotribes-page.qa-restyle .dcard p {
font-size: 14.72px;
}
.geotribes-page.qa-restyle .checks li {
font-size: 14.88px;
}
.geotribes-page.qa-restyle .call-big {
font-size: 24px;
}
.geotribes-page.qa-restyle .rda_btn {
font-size: 15.52px;
}
.geotribes-page.qa-restyle .micro {
font-size: 13.28px;
}
.geotribes-page.qa-restyle .form { /* mockup .form label = .85rem */
/* mockup .form input = .95rem */
/* mockup .micro = .83rem */
}
.geotribes-page.qa-restyle .form .field-label label:not(.error) {
font-size: 13.6px;
}
.geotribes-page.qa-restyle .form input, .geotribes-page.qa-restyle .form textarea {
font-size: 15.2px;
}
.geotribes-page.qa-restyle .form .micro {
font-size: 13.28px;
}
/* About mockup type ramp — clone of the Living Insights / segments ramps above
(the about-restyled1200 mockup shares the same 16.5px-body scale; px = mockup_rem
× 16). Page-scoped to .about-page so About honours its mockup precisely. WITHOUT
this block About inherited the shared .qa-restyle base, which is Intelligence-
derived and runs ~5% small (section 15.675px, h2 28.13px) — leaving About visibly
smaller than its mockup and than the sibling restyled pages beside it. The .form
sub-block must be re-asserted too: the shared form block (the .intelligence-page,
.living-insights-page, .geotribes-page, .about-page group) defaults to the smaller
Intelligence sizes, so without this the form stayed small while the body jumped.
See [[project_intelligence_fontscale]] — by formula, NOT fontscale.py. */
.about-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* mockup .lead = 1.03rem */
/* mockup .dcard h3 = 1.05rem */
/* mockup .dcard p = .9rem */
/* mockup .checks li = .93rem */
/* mockup .call-big = 1.5rem */
/* mockup .btn = .97rem (Message us) */
/* mockup .micro = .83rem */
/* SOC 2 certificate image — mockup caps it at max-width:230px (shared .fig img is
max-width:100%, which would fill the .split column). Scoped to .fig.soc2 so the
mass-of-people .fig.full banner keeps its full width. */
/* mass-of-people banner — mockup crops it to a fixed band (height clamp + cover),
not the shared .fig img height:auto (which renders the photo at full natural
height). width:100% is inherited from the shared .fig.full img rule. */
}
.about-page.qa-restyle section {
font-size: 16.5px;
}
.about-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.about-page.qa-restyle .section-lead {
font-size: 16.48px;
}
.about-page.qa-restyle .dcard h3 {
font-size: 16.8px;
}
.about-page.qa-restyle .dcard p {
font-size: 14.4px;
}
.about-page.qa-restyle .checks li {
font-size: 14.88px;
}
.about-page.qa-restyle .call-big {
font-size: 24px;
}
.about-page.qa-restyle .rda_btn {
font-size: 15.52px;
}
.about-page.qa-restyle .micro {
font-size: 13.28px;
}
.about-page.qa-restyle .fig.soc2 img {
max-width: 230px;
}
.about-page.qa-restyle .fig.full img {
height: clamp(200px, 26vw, 330px);
object-fit: cover;
}
.about-page.qa-restyle .form { /* mockup .form label = .85rem */
/* mockup .form input = .95rem */
/* mockup .micro = .83rem */
}
.about-page.qa-restyle .form .field-label label:not(.error) {
font-size: 13.6px;
}
.about-page.qa-restyle .form input, .about-page.qa-restyle .form textarea {
font-size: 15.2px;
}
.about-page.qa-restyle .form .micro {
font-size: 13.28px;
}
/* Human Insights Data (consumer-data.php) — page-scoped restyle.
Type ramp = clone of the LI / segments / about ramps (px = mockup_rem × 16, body
16.5px), trimmed to the selectors that exist in THIS DOM (intro h2 + lead + p, plus
the three .dbox sections — no .subhead / .eyebrow; the hero uses .counter).
The .dbox / .dbox.rev / .dbox-media / .dbox-links components are NEW (not in the
shared .qa-restyle layer), ported verbatim from the human-insights-data mockup and
nested page-scoped so they can't leak and so .dbox-links a (0,3,1) out-specifies the
body-link recolour (0,2,1) below, keeping the data-set links brand-red per mockup.
See [[project_intelligence_fontscale]] — by formula, NOT fontscale.py. */
.consumer-data-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* "Data Sets" intro title at 1.5× the page h2 (29.6px × 1.5) */
/* mockup .lead = 1.03rem */
/* re-assert the global cascade (_global.scss p{1.3} / a{color:$blue}) per
[[project_restyle_lineheight_cascade]] — restyled body copy is 1.6, links brand-red */
/* alternating media/text rows — mockup .dbox (separated by margin, not
) */
/* data-set CTAs use .cta-row + .btn-outline.btn-outline--sm (Living Insights
pattern); .btn-outline is page-scoped above, .cta-row is shared. */
/* mockup stacks the rows at 820px (≠ the 740px banner rule @ index.scss:1250) */
}
.consumer-data-page.qa-restyle section {
font-size: 16.5px;
}
.consumer-data-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.consumer-data-page.qa-restyle .secondary-heading.data-sets-heading {
font-size: 44.4px;
}
.consumer-data-page.qa-restyle .section-lead {
font-size: 16.48px;
}
.consumer-data-page.qa-restyle p {
line-height: 1.6;
}
.consumer-data-page.qa-restyle a {
color: var(--brand-dark);
}
.consumer-data-page.qa-restyle .dbox {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 46px;
align-items: center;
margin-top: 46px;
/* flip media to the right on alternating rows */
/* dimension titles carry .mb-3.secondary-heading — styled by the shared
.secondary-heading (dark, weight 500) + the page ramp (29.6px), matching
the intro section heading. No bespoke .dbox h2 rule (intentionally dark,
not the mockup's red — per design decision). */
}
.consumer-data-page.qa-restyle .dbox.rev .dbox-media {
order: 2;
}
.consumer-data-page.qa-restyle .dbox p {
/* mockup .dbox p sets no font-size — inherits body 16.5px (NOT .92rem) */
margin-bottom: 12px;
}
.consumer-data-page.qa-restyle .dbox p:last-of-type {
margin-bottom: 0;
}
.consumer-data-page.qa-restyle .dbox p b {
color: var(--ink);
}
.consumer-data-page.qa-restyle .dbox-media img {
display: block;
width: 100%;
height: auto;
border-radius: 6px; /* mockup var(--radius) */
box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.08);
}
@media (max-width: 820px) {
.consumer-data-page.qa-restyle .dbox {
grid-template-columns: 1fr;
gap: 22px;
/* rev rows also stack media-above-text */
}
.consumer-data-page.qa-restyle .dbox.rev .dbox-media {
order: 0;
}
}
/* geoSmart Segments (geosmart.php) — page-scoped restyle.
Reuses the shared .qa-restyle vocabulary entirely (.split / .fig / .checks /
.flist / .demo-grid / .cta-row) — no new components, unlike consumer-data's
bespoke .dbox. Type ramp = clone of the LI / segments / about ramps
(px = mockup_rem × 16, body 16.5px), trimmed to the selectors present in THIS
DOM. By formula, NOT fontscale.py (baseline stale). See
[[project_intelligence_fontscale]]. */
.geosmart-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* mockup .lead = 1.03rem */
/* mockup .checks li = .93rem */
/* mockup .flist li = .92rem */
/* mockup .call-big = 1.5rem */
/* mockup .btn = .97rem (Message us) */
/* mockup .micro = .83rem */
/* re-assert the global cascade (_global.scss p{1.3} / a{color:$blue}) per
[[project_restyle_lineheight_cascade]] — restyled body copy is 1.6, links brand-red */
/* interactive 56-segment map wrapper — the live gallery replaces the mockup's
static chart figure (which carries margin-top:26px). The gallery's .graph_geosmart
ships no top margin, so it butted up against the "Click on each…" hint; re-assert
the mockup's 26px text→figure gap here. */
/* intro line above the .flist ("…find your best target segments by:") — not in
the shared layer, so define it here (geoSmart-only). mockup .list-intro */
/* shared .fig ships no figcaption styling — the geoSmart map figure carries one */
/* downloads — centred bold label + centred button row (mockup) */
/* alternating split: image (narrow) on the LEFT, body copy (wide) on the RIGHT —
Cultural Diversity row. Source order is figure-then-text, so flip the column
weights (shared .split is 1.25fr .75fr, text-left). This selector (0,3,0)
out-specifies the shared @980 `.split{1fr}` collapse (0,1,0), so re-declare the
collapse here or it would stay 2-col on mobile. */
}
.geosmart-page.qa-restyle section {
font-size: 16.5px;
}
.geosmart-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.geosmart-page.qa-restyle .section-lead {
font-size: 16.48px;
}
.geosmart-page.qa-restyle .checks li {
font-size: 14.88px;
}
.geosmart-page.qa-restyle .flist li {
font-size: 14.72px;
}
.geosmart-page.qa-restyle .call-big {
font-size: 24px;
}
.geosmart-page.qa-restyle .rda_btn {
font-size: 15.52px;
}
.geosmart-page.qa-restyle .micro {
font-size: 13.28px;
}
.geosmart-page.qa-restyle p {
line-height: 1.6;
}
.geosmart-page.qa-restyle a {
color: var(--brand-dark);
}
.geosmart-page.qa-restyle .geotribes_segment_item {
margin-top: 26px;
}
.geosmart-page.qa-restyle .list-intro {
margin-top: 16px;
margin-bottom: 2px;
color: var(--muted);
font-size: 15.2px; /* mockup .list-intro = .95rem */
}
.geosmart-page.qa-restyle .fig figcaption {
font-style: italic;
color: var(--muted);
font-size: 13.76px; /* mockup figcaption = .86rem */
line-height: 1.5;
margin-top: 10px;
}
.geosmart-page.qa-restyle .form { /* mockup .form label = .85rem */
/* mockup .form input = .95rem */
/* mockup .micro = .83rem */
}
.geosmart-page.qa-restyle .form .field-label label:not(.error) {
font-size: 13.6px;
}
.geosmart-page.qa-restyle .form input, .geosmart-page.qa-restyle .form textarea {
font-size: 15.2px;
}
.geosmart-page.qa-restyle .form .micro {
font-size: 13.28px;
}
.geosmart-page.qa-restyle .downloads {
text-align: center;
}
.geosmart-page.qa-restyle .downloads .cta-row {
justify-content: center;
}
.geosmart-page.qa-restyle .split.rev {
grid-template-columns: 0.75fr 1.25fr;
}
@media (max-width: 980px) {
.geosmart-page.qa-restyle .split.rev {
grid-template-columns: 1fr;
}
}
/* Explorer (explorer.php) — page-scoped restyle.
Reuses the shared .qa-restyle vocabulary (.split / .fig / .checks / .flist /
.demo-grid / .cta-row), plus a net-new .numlist for the Audience-Finder steps.
Type ramp = clone of the geoSmart ramp (px = mockup_rem × 16, body 16.5px),
trimmed to the selectors present in THIS DOM. By formula, NOT fontscale.py.
See [[project_intelligence_fontscale]]. */
.explorer-page.qa-restyle { /* mockup body = 16.5px */
/* mockup h2 = 1.85rem */
/* divider heading ("Why Smart Planners…") — 20% smaller than the hero h1
(#banner_landing_wrap.explorer-page .primary-heading clamp(36.8,6.2vw,68.8) × 0.8),
fluid so it holds the proportion at every screen size. (0,4,0) beats the .secondary-heading ramp. */
/* mockup .lead = 1.03rem, Regular (site body defaults to Light 300) */
/* explorer mockup: hero-tag margin 20px 0 0 (size/weight from shared .qa-restyle .hero-tag) */
/* mockup .checks li = .93rem */
/* mockup .flist li = .92rem */
/* mockup .call-big = 1.5rem */
/* mockup .btn = .97rem (Message us) */
/* mockup .micro = .83rem */
/* re-assert the global cascade (_global.scss p{1.3} / a{color:$blue}) per
[[project_restyle_lineheight_cascade]] — restyled body copy is 1.6, links brand-red */
/* the Explorer mockup uses EQUAL, top-aligned split columns (1fr 1fr) for every
two-up row — UNLIKE the shared .split (1.25fr .75fr, centered) and the geoSmart
.split.rev (.75fr 1.25fr). Override both here. This selector (0,3,0) out-specifies
the shared @980 `.split{1fr}` collapse (0,2,0), so re-declare the collapse, and
drop the figure below the text on rev rows (mockup .split.rev figure{order:2}). */
/* intro line above a .flist / .numlist (mockup .list-intro) — not in the shared layer */
/* downloads — centred bold label + centred button row (mockup) */
/* shared .fig ships no figcaption styling — Explorer content figures carry captions */
/* net-new, page-scoped: red-numbered ordered list (mockup .numlist) for the
Audience-Finder workflow steps — the shared layer ships only .flist / .checks */
}
.explorer-page.qa-restyle section {
font-size: 16.5px;
}
.explorer-page.qa-restyle .secondary-heading {
font-size: 29.6px;
}
.explorer-page.qa-restyle .secondary-heading.divider-heading {
font-size: clamp(29.44px, 4.96vw, 55.04px);
font-weight: 300;
}
.explorer-page.qa-restyle .section-lead {
font-size: 16.48px;
font-weight: 400;
}
.explorer-page.qa-restyle .hero-tag {
margin-top: 20px;
}
.explorer-page.qa-restyle .checks li {
font-size: 14.88px;
}
.explorer-page.qa-restyle .flist li {
font-size: 14.72px;
}
.explorer-page.qa-restyle .call-big {
font-size: 24px;
}
.explorer-page.qa-restyle .rda_btn {
font-size: 15.52px;
}
.explorer-page.qa-restyle .micro {
font-size: 13.28px;
}
.explorer-page.qa-restyle p {
line-height: 1.6;
}
.explorer-page.qa-restyle a {
color: var(--brand-dark);
}
.explorer-page.qa-restyle .split,
.explorer-page.qa-restyle .split.rev {
align-items: start;
grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px) {
.explorer-page.qa-restyle .split,
.explorer-page.qa-restyle .split.rev {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.explorer-page.qa-restyle .split.rev figure {
order: 2;
}
}
.explorer-page.qa-restyle .list-intro {
margin-top: 16px;
margin-bottom: 2px;
color: var(--muted);
font-size: 15.2px; /* mockup .list-intro = .95rem */
}
.explorer-page.qa-restyle .downloads {
text-align: center;
}
.explorer-page.qa-restyle .downloads .cta-row {
justify-content: center;
}
.explorer-page.qa-restyle .fig figcaption {
font-style: italic;
color: var(--muted);
font-size: 13.76px; /* mockup figcaption = .86rem */
line-height: 1.5;
margin-top: 10px;
}
.explorer-page.qa-restyle .form { /* mockup .form label = .85rem */
/* mockup .form input = .95rem */
/* mockup .micro = .83rem */
}
.explorer-page.qa-restyle .form .field-label label:not(.error) {
font-size: 13.6px;
}
.explorer-page.qa-restyle .form input, .explorer-page.qa-restyle .form textarea {
font-size: 15.2px;
}
.explorer-page.qa-restyle .form .micro {
font-size: 13.28px;
}
.explorer-page.qa-restyle .numlist {
list-style: decimal;
margin: 12px 0 0 1.4em;
}
.explorer-page.qa-restyle .numlist li {
padding: 0 0 11px 0.3em;
font-size: 14.72px; /* mockup .numlist li = .92rem */
line-height: 1.5;
}
.explorer-page.qa-restyle .numlist li::marker {
color: var(--brand);
font-weight: 700;
}
/* Content gutter for every worked (.qa-restyle) page at/below 1200px. The .container
on these pages is max-width:1200 and goes full-width (100vw) at ≤1200px, so hero
taglines, headings and body copy ran flush to the screen edges. Re-assert a 24px
gutter on the four product-page heroes (#banner_landing_wrap.qa-restyle is itself
the .container) and every restyled body .container (Intelligence / Living Insights /
Segments / About / Home; the Home hero .home-banner-wrap is OUTSIDE the wrapper so
it is untouched).
Per design: at ≤1200px ONLY the banner image and the section dividers may touch the
walls — everything else (incl. .fig.full content figures) keeps the gutter.
• Section dividers are the section's border-top, painted on the full-width
border-box, so padding leaves them full-bleed automatically — no rule needed.
• The hero banner image is a direct child of the padded hero container, so it
would otherwise inset with the text; pull it back out to full-bleed with a
negative inline margin.
Above 1200px the container centres in its 1200 box and supplies its own gutter. */
@media (max-width: 1200px) {
#banner_landing_wrap.qa-restyle,
.qa-restyle .container {
padding-inline: 24px;
}
/* hero banner image stays edge-to-edge (the one element, with the dividers,
allowed to hit the walls) */
#banner_landing_wrap.qa-restyle > img {
width: calc(100% + 48px);
max-width: none;
margin-inline: -24px;
}
}
/* geoTribes home-page product-vignettes mockup ramp + components — page-scoped to
.home-page (the five product vignettes on index.php only) so it honours the
home-vignettes mockup precisely without touching the shared layer or the other
rolled-out pages. px = mockup_rem × 16 (F = 1.0); body 16.5px like the LI/segments
ramps. Reuses the shared .qa-restyle section divider, .split grid, .section-lead /
.flist bases; defines the components the shared layer lacks (.eyebrow, .figure,
.hlinks and the Quick Append .qa-image creative). The compound
.home-page.qa-restyle (0,2,0) out-specifies the shared .qa-restyle (0,1,0) regardless
of source order. See [[project_intelligence_fontscale]] — by formula, NOT fontscale.py. */
.home-page.qa-restyle {
/* ---- type ramp (px = mockup_rem × 16) ---- */
/* mockup body = 16.5px (matches the LI/segments ramps) */
/* Postcode Profiler form's "Top geoTribes Segments" heading — keep on one line
(it sits in a narrow .col-right and otherwise wraps to two); sized down so the
nowrap line fits the column without overflowing the panel. */
/* eyebrow / catalogue index ("↳ 0N/") — small, lightly tracked ink (mockup .eyebrow) */
/* blue lead — override the shared .section-lead size to the home mockup (.lead = 1.12rem);
colour/blue inherited from the shared .section-lead base. */
/* body-copy paragraph — inherits the section 16.5px (mockup body) */
/* red-check capability list — override the shared 1-col .flist to the mockup's
2-col grid; the ✓ ::before (content + colour + the font-synthesis-weight:auto
exception @ ".qa-restyle .flist li::before") is inherited from the shared .flist. */
/* home-page text links — red, right chevron, hairline rule (mockup .hlinks / .hlink) */
/* figure cell (Intelligence, Living Insights, Explorer) */
/* Quick Append creative — hero figures on cream + How-it-works overlay in dark ink */
/* inline body links red (mockup a{color:var(--brand-dark)}); the global a{color:$blue}
(_global.scss) would otherwise win. .hlink (0,3,0) stays brand-red over this (0,2,1). */
/* single-column flatten — mirror the shared 980px breakpoint for the home-only grids
(.split already collapses via the shared .qa-restyle @media). */
}
.home-page.qa-restyle section {
font-size: 16.5px;
}
.home-page.qa-restyle h2,
.home-page.qa-restyle .secondary-heading {
font-size: 42px; /* section heading (35px × 1.2) */
font-weight: 500;
line-height: 1.25;
margin-bottom: 10px; /* mockup h2 */
}
.home-page.qa-restyle .profile-finder-wrap .secondary-heading {
font-size: 16px;
white-space: nowrap;
}
.home-page.qa-restyle .eyebrow {
margin-bottom: 16px;
color: var(--ink);
font-size: 15.2px; /* mockup .eyebrow = .95rem */
font-weight: 400;
letter-spacing: 0.04em;
}
.home-page.qa-restyle .section-lead {
max-width: 46em;
margin-bottom: 12px;
font-size: 22px;
}
.home-page.qa-restyle .body-copy {
max-width: 42em;
color: var(--muted);
}
.home-page.qa-restyle .flist {
margin: 18px 0 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 28px;
}
.home-page.qa-restyle .flist li {
padding: 0 0 0 26px;
font-size: 15.04px; /* mockup .flist li = .94rem */
line-height: 1.45;
}
.home-page.qa-restyle .hlinks {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-top: 10px;
/* single links (non-Segments vignettes) sit to the right */
}
.home-page.qa-restyle .hlinks.right {
align-items: flex-end;
}
.home-page.qa-restyle .hlink {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--line); /* quickappend row separator */
color: var(--brand);
font-size: 16px; /* mockup .hlink = 1rem */
font-weight: 600;
line-height: 1.3;
text-decoration: none;
}
.home-page.qa-restyle .hlink:hover {
color: var(--brand-dark);
}
.home-page.qa-restyle .hlink .chev {
flex: none;
font-weight: 700;
}
.home-page.qa-restyle .figure {
margin: 0;
/* standardised 371/201 product images (Intelligence, Explorer) */
/* Living Insights photo sits borderless */
}
.home-page.qa-restyle .figure a {
display: block;
}
.home-page.qa-restyle .figure img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--line);
border-radius: 4px;
}
.home-page.qa-restyle .figure.std img {
aspect-ratio: 371/201;
object-fit: cover;
height: auto;
}
.home-page.qa-restyle .figure.no-border img {
border: none;
}
.home-page.qa-restyle .qa-image {
position: relative;
width: 100%;
aspect-ratio: 371/201;
overflow: hidden;
background: #f7f5f1;
border: 1px solid var(--line);
border-radius: 4px;
}
.home-page.qa-restyle .qa-image img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-page.qa-restyle .qa-image .scrim {
position: absolute;
inset: 0;
z-index: 1;
background: none;
}
.home-page.qa-restyle .qa-flow {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: clamp(8px, 1.4vw, 12px);
padding: clamp(13px, 2.2vw, 18px);
}
.home-page.qa-restyle .qa-flow .cap {
color: var(--ink, #1f1f1f);
font-size: 12.16px; /* mockup .qa-flow .cap = .76rem */
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.62;
text-shadow: none;
}
.home-page.qa-restyle .qa-steps {
position: relative;
flex: 1;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.home-page.qa-restyle .qa-steps::before {
content: "";
position: absolute;
left: 12px;
top: 13px;
bottom: 13px;
width: 2px;
background: rgba(21, 32, 43, 0.16);
}
.home-page.qa-restyle .qa-steps li {
position: relative;
display: flex;
align-items: center;
gap: 13px;
}
.home-page.qa-restyle .qa-steps li.key .n {
background: var(--brand);
color: #fff;
box-shadow: none;
}
.home-page.qa-restyle .qa-steps li.key .t {
font-weight: 600;
}
.home-page.qa-restyle .qa-steps .n {
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
color: var(--ink, #1f1f1f);
font-size: 13.6px; /* mockup .qa-steps .n = .85rem */
font-weight: 600;
box-shadow: 0 0 0 1px rgba(21, 32, 43, 0.14), 0 1px 3px rgba(21, 32, 43, 0.1);
}
.home-page.qa-restyle .qa-steps .t {
color: var(--ink, #1f1f1f);
font-size: clamp(14.4px, 1.05vw, 16.96px); /* mockup .qa-steps .t = clamp(.9rem,1.05vw,1.06rem) */
font-weight: 500;
text-shadow: none;
}
.home-page.qa-restyle a {
color: var(--brand-dark);
}
@media (width <= 980px) {
.home-page.qa-restyle .flist {
grid-template-columns: 1fr;
}
}
/* ============================================================
Ported to the SHARED .qa-restyle layer — additive; the
.intelligence-page rules above are left intact (intelligence is the
one approved page, kept untouched). Only line-height + letter-spacing
are shared; font-SIZE is deliberately NOT ported, so each rolled-out
page keeps its own hero size. All values are scale-relative
(em / unitless), so they stay coherent at any size.
============================================================ */
.qa-restyle,
.qa-restyle p {
line-height: 1.6; /* body copy — beats the global p{1.3} on every restyled page */
}
.qa-restyle p {
font-weight: 300; /* Light body copy — Issue #10; beats global p + inherited */
}
#banner_landing_wrap.qa-restyle .primary-heading {
letter-spacing: -0.015em;
line-height: 1;
}
#banner_landing_wrap.qa-restyle .counter {
letter-spacing: 0.04em;
}
#banner_landing_wrap.qa-restyle .banner-description {
line-height: 1.18;
letter-spacing: normal; /* removes the base -1px tracking on the other heroes' subs (mockup) */
}
@media screen and (width <= 464px) {
#barChartSvg,
.profile-finder-wrap {
width: unset;
max-width: 100%;
}
#livingInsightsUrl {
left: 0.2vw;
position: relative;
}
/**
* hides certain login urls from footer and navbar login section as the login
* page for these are not optimised for small screen devices
*/
#loginGroup .li-login-url,
#loginGroup .sp-login-url,
#loginGroup .explorer-login-url,
#navbarLoginGroup .li-login-url,
#navbarLoginGroup .sp-login-url,
#navbarLoginGroup .explorer-login-url {
display: none;
}
}
@media screen and (width <= 400px) {
.product-image {
width: 100%;
}
}
@media screen and (width <= 340px) {
#geoSmartUrl::after {
padding-left: 7rem;
}
#geoTribesUrl::after {
padding-left: 2px;
}
}
@media screen and (width <= 320px) {
#geoSmartUrl::after,
#geoTribesUrl::after {
content: "";
padding-left: 0;
}
}
#profileChartWrap a.chart-img-url {
/**
* svg specific styling
*/
}
#profileChartWrap a.chart-img-url text {
fill: var(--highlighter-color-hexa);
cursor: pointer;
font-size: 1.5rem;
font-family: "Sofia Pro", sans-serif;
text-decoration: underline;
}
#profileChartWrap a.chart-img-url text:hover {
font-size: 1.48rem;
font-weight: bold;
text-decoration: none;
}
/* ============================================================
Quick Append / Living Insights restyle — SHARED component layer (Issue #10)
Keyed on .qa-restyle, which every restyled product page carries
alongside its own thin .-page class. The tokens and component
vocabulary are byte-identical across the Intelligence, Living Insights
and Segments mockups, so they live here once rather than per page.
Values lifted from the approved mockups
(work-item/10/resources/html/*-restyled1200*.html).
Additive — does NOT touch the old .geotribes-page,.intelligence-page
block above, which segments.php still depends on.
============================================================ */
.qa-restyle {
/* mockup tokens, shared by every page wearing .qa-restyle */
--brand: #C4242B ;
--brand-dark: #A31D24 ;
--brand-tint: #F9EEEC ;
--blue: #4A90C2 ;
--ink: #222222 ;
--muted: #4A5258 ;
--line: #DDDDD8 ;
/* section dividers replace the old
; the
border tracks the .container width so it aligns with the hero.
Only matches body s nested under the wrapper div — the
hero itself carries .qa-restyle (not a descendant) so it is
left untouched. */
/* CTA — reuse the site .rda_btn, recoloured to the mockup red.
!important on color is required to beat the base rules
.rda_btn{color:#fff!important} and .rda_btn:hover{color:#000!important}. */
/* hero tagline row (mockup .hero-tag-row): the banner tagline and the
"Book a demo" CTA share one line, button pushed to the right; the
tagline drops the big .banner-description clamp for the mockup's
1.06rem. Resolves under the hero, which carries .qa-restyle. */
/* p.hero-tag (0,2,1) so line-height beats the per-page `p{line-height:1.6}`
re-assertions (..qa-restyle p, also (0,2,1)) on source order. */
/* blue lead paragraph (mockup .lead, renamed to avoid the
Bootstrap .lead collision) */
/* trailing explanatory paragraph under a list/grid */
/* fine-print footnote (mockup .micro). The form-scoped .micro below is more
specific (.living-insights-page .form .micro) so it still wins in the form. */
/* divider list with run-in leads */
/* feature / simulation card grids */
/* enrichment-channel card header — icon row + title. Placed AFTER .dcard so
.chan-head h3 (equal 0,2,1 specificity) wins on source order over .dcard h3. */
/* checkmark list inside the channel cards (model: .checks). Run-in leads
stay inline — no display:block, unlike .checks b. */
/* blush callout panel */
/* red-check list (2-col grid) */
/* sub-section heading above a checks / card grid (mockup .subhead) */
/* numbered step list (run-in) */
/* two-up text + figure */
/* right-align the fixed-width Postcode Profiler form within its grid cell */
/* equal-height columns in the profiler section: bring the left content up to the
height of the Postcode Profiler form (overrides the shared .split align-items:center) */
/* profiler cross-sell CTA (mockup .pp-cta) — sits under the .section-lead in the
left text column, divided off by a hairline rule */
/* contact — Talk to us */
/* button row (mockup .cta-row) — needs no breakpoint of its own (flex-wrap) */
}
.qa-restyle section {
border-top: 1px solid #BBBBB4; /* quickappend section divider */
padding-block: 56px;
font-size: 15.675px; /* mockup body; site root is 62.5% (1rem=10px) so px is used to hit the mockup's pixels */
line-height: 1.6;
}
.qa-restyle section p {
color: var(--muted);
}
.qa-restyle section h2,
.qa-restyle section .secondary-heading {
font-size: 29.6px; /* section heading standardised to 29.6px across all pages (homepage .home-page h2 overrides to 42px) */
font-weight: 500;
line-height: 1.25;
}
.qa-restyle .rda_btn {
padding: 12px 26px;
font-size: 14.74px; /* mockup .btn = .921rem @16px */
font-weight: 600; /* mockup .btn — boldface CTA */
color: #fff !important;
background: var(--brand);
border-color: var(--brand);
border-radius: 4px;
}
.qa-restyle .rda_btn:hover {
color: #fff !important;
background: var(--brand-dark);
border-color: var(--brand-dark);
}
.qa-restyle .hero-tag-row {
display: flex;
gap: 24px;
margin-top: 20px;
align-items: center;
}
.qa-restyle p.hero-tag {
margin: 0;
max-width: 52em;
color: var(--ink);
font-size: 25.16px; /* bottom tagline: 85% of section title (29.6px × 0.85) */
line-height: 3.5rem; /* bottom tagline line-height */
font-weight: 300; /* mockup postface = Regular; real 'Sofia Pro' wired in _header @font-face */
}
.qa-restyle .hero-tag-row .rda_btn {
flex: none;
margin-left: auto;
white-space: nowrap;
}
.qa-restyle .section-lead {
max-width: 54em;
color: var(--blue);
font-size: 15.65px; /* mockup .lead = 0.978rem @16px */
}
.qa-restyle .section-note {
max-width: 54em;
margin-top: 20px;
}
.qa-restyle .micro {
color: var(--muted);
font-size: 13.28px; /* mockup .micro = .83rem @16px */
}
.qa-restyle .what-list {
max-width: 58em;
list-style: none;
padding-left: 0;
}
.qa-restyle .what-list li {
padding: 0 0 12px;
color: var(--muted);
font-size: 14.59px; /* mockup .what-list li = .912rem @16px */
}
.qa-restyle .what-list b {
color: var(--ink);
}
.qa-restyle .card-grid {
gap: 18px;
margin-top: 26px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.qa-restyle .chan-grid {
gap: 18px;
margin-top: 26px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.qa-restyle .dcard {
padding: 22px;
background: #fff;
border: 1px solid var(--line);
border-top: 3px solid var(--brand);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.06);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qa-restyle .dcard h3 {
margin-bottom: 6px;
color: var(--brand);
font-size: 15.95px; /* mockup .dcard h3 = .997rem @16px */
font-weight: 500; /* mockup h1,h2,h3 */
line-height: 1.25;
}
.qa-restyle .dcard h3 a {
color: inherit;
text-decoration: none;
}
.qa-restyle .dcard h3 a:hover {
text-decoration: underline;
}
.qa-restyle .dcard p {
color: var(--muted);
font-size: 13.98px; /* mockup .dcard p = .874rem @16px */
}
.qa-restyle .dcard:hover {
transform: translateY(-2px);
box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.1);
}
.qa-restyle .chan-head {
display: flex;
gap: 12px;
margin-bottom: 4px;
align-items: center;
}
.qa-restyle .chan-head .icos {
display: flex;
gap: 8px;
}
.qa-restyle .chan-head img {
height: 30px;
width: auto;
}
.qa-restyle .chan-head h3 {
margin: 0;
color: var(--brand);
font-size: 18.88px; /* mockup .chan-head h3 = 1.18rem @16px */
}
.qa-restyle .chan-sub {
margin: 0 0 6px;
color: var(--muted);
font-size: 15.2px; /* mockup .chan-sub = .95rem @16px */
}
.qa-restyle .chan-lab {
margin-top: 16px;
color: var(--muted);
font-size: 12.16px; /* mockup .chan-lab = .76rem @16px */
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.qa-restyle .flist {
margin: 8px 0 0;
list-style: none;
padding-left: 0; /* site has no *{padding:0} reset; kill the default ul indent (mockup is flush) */
}
.qa-restyle .flist li {
position: relative;
padding: 0 0 10px 24px;
color: var(--ink);
font-size: 14.4px; /* mockup .flist li = .9rem @16px */
line-height: 1.5;
}
.qa-restyle .flist li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--brand);
font-weight: 700;
}
.qa-restyle .flist li:last-child {
padding-bottom: 0;
}
.qa-restyle .flist li b {
color: var(--brand);
font-weight: 600;
}
.qa-restyle .panel {
padding: 24px 26px;
margin-top: 24px;
background: var(--brand-tint);
border: 1px solid #E9D6D3;
border-radius: 4px;
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.07);
}
.qa-restyle .panel p {
color: var(--ink);
}
.qa-restyle .panel p b {
color: var(--brand);
font-weight: 600;
}
.qa-restyle .checks {
gap: 16px 30px;
margin-top: 22px;
list-style: none;
padding-left: 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.qa-restyle .checks li {
position: relative;
padding-left: 28px;
color: var(--ink);
font-size: 14.13px; /* mockup .checks li = .883rem @16px */
line-height: 1.5;
}
.qa-restyle .checks li::before {
content: "✓";
position: absolute;
top: 0;
left: 0;
color: var(--brand);
font-weight: 700;
}
.qa-restyle .checks b {
display: block;
margin-bottom: 2px;
color: var(--brand);
font-weight: 600;
}
.qa-restyle .subhead {
margin: 26px 0 2px;
color: var(--ink);
font-size: 16.64px; /* mockup .subhead = 1.04rem @16px */
font-weight: 600;
}
.qa-restyle .subhead + .checks {
margin-top: 14px;
}
.qa-restyle .steps {
list-style: none;
counter-reset: step;
padding-left: 0;
}
.qa-restyle .steps li {
position: relative;
padding: 0 0 16px 40px;
color: var(--muted);
font-size: 14.43px; /* mockup .steps li = .902rem @16px */
line-height: 1.55;
}
.qa-restyle .steps li::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: 1px;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 12.91px; /* mockup .steps li::before = .807rem @16px */
font-weight: 600;
}
.qa-restyle .steps li:last-child {
padding-bottom: 0;
}
.qa-restyle .steps b {
color: var(--ink);
}
.qa-restyle .split {
gap: 40px;
margin-top: 8px;
display: grid;
align-items: center;
grid-template-columns: 1.25fr 0.75fr;
}
.qa-restyle .split.img-lg {
grid-template-columns: 1.05fr 0.95fr;
}
.qa-restyle .split .profile-finder-wrap {
justify-self: end;
}
.qa-restyle #segmentationSection .split {
align-items: stretch;
}
.qa-restyle .pp-cta {
max-width: 30em;
color: var(--muted);
font-size: 15.36px; /* mockup .pp-cta = .96rem @16px */
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.qa-restyle .pp-cta b {
color: var(--ink);
}
.qa-restyle .pp-cta a {
color: var(--brand-dark);
font-weight: 600;
text-decoration: none;
}
.qa-restyle .pp-cta a:hover {
text-decoration: underline;
}
.qa-restyle .fig {
margin: 0;
text-align: center;
/* crop the washed-out left of the photo and let the subject
on the right fill (and enlarge to) the column */
}
.qa-restyle .fig img {
height: auto;
max-width: 100%;
border-radius: 4px;
}
.qa-restyle .fig.full img {
width: 100%;
}
.qa-restyle .fig.crop-right {
overflow: hidden;
border-radius: 4px;
}
.qa-restyle .fig.crop-right img {
display: block;
width: 222.22%;
max-width: none;
margin-left: -122.22%;
}
.qa-restyle .demo-grid {
gap: 48px;
margin-top: 8px;
display: grid;
align-items: start;
grid-template-columns: 1.15fr 0.85fr;
}
.qa-restyle .call-big {
color: var(--ink);
font-size: 22.8px; /* mockup .call-big = 1.425rem @16px */
font-weight: 700;
}
.qa-restyle .call-big a {
color: var(--ink);
text-decoration: none;
}
.qa-restyle .cta-row {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
@media (width <= 980px) {
.qa-restyle {
/* stacked contact form: message line under Send takes space only while it
shows a message (success / error class; script drops both when it fades
out), and the 48px column gap shrinks to a 24px row gap, so Send to
"Or Call Us" lands near 25px. Desktop keeps the reserved line. */
/* stacked: "Or Call Us" + number one line, never wrapping, same rule every
page. Number at shared 22.8px (per-page 24px kept above 980px). Pair text
at full size 304.23px on site fonts; full size from ~370px wide, below that
both scale with viewport: 100vw - 48px section padding - 16px gap - 2px
spare = 100vw - 66px. Factors = font size / 304.23. */
/* .split.img-lg (0,3,0) out-specifies the plain .split collapse above, so it
is listed explicitly — without it the Postcode Profiler split (home +
segments, both .split.img-lg) and the Intelligence steps+image split stayed
2-column and shrank instead of stacking. Once stacked, drop the form's
justify-self:end so it sits at the left edge below the text, not floating
right. */
/* once stacked, the .split 40px column gap would become a tall vertical gap;
20px read too tight at 769–980, so settle on a consistent 40px across the
whole stacked range (paired with the margin-top:0 reset above). */
}
.qa-restyle section {
padding-block: 40px;
}
.qa-restyle .card-grid,
.qa-restyle .chan-grid,
.qa-restyle .checks,
.qa-restyle .split,
.qa-restyle .split.img-lg,
.qa-restyle .demo-grid {
grid-template-columns: 1fr;
}
.qa-restyle #contact .demo-grid {
row-gap: 24px;
}
.qa-restyle #contact .form .global-message:not(.success, .error) {
margin-block-start: 0;
min-block-size: 0;
block-size: 0;
overflow: hidden;
}
.qa-restyle #contact .call-us {
display: flex;
align-items: baseline;
column-gap: 16px;
white-space: nowrap;
/* no bottom margins in the row: section's 40px bottom padding alone
spaces the number from the footer. !important beats .mb-3 utility */
}
.qa-restyle #contact .call-us h2 {
font-size: min(29.6px, (100vw - 66px) * 0.0973);
margin-bottom: 0 !important;
}
.qa-restyle #contact .call-big {
font-size: min(22.8px, (100vw - 66px) * 0.0749);
margin-bottom: 0;
}
.qa-restyle .split .profile-finder-wrap {
justify-self: start;
/* a legacy global rule adds margin-top:5rem to .profile-finder-wrap at
<=768px (scss ~1228), so the stacked gap jumped from 20px (769–980) to
70px (<=768). Neutralise it so row-gap alone controls the gap at every
stacked width. */
margin-top: 0;
}
.qa-restyle .split.img-lg {
row-gap: 40px;
}
.qa-restyle .hero-tag-row {
gap: 14px;
flex-direction: column;
align-items: flex-start;
}
.qa-restyle .hero-tag-row .rda_btn {
margin-left: 0;
}
}
/* ============================================================
Intelligence — inline "Talk to us" form
Page-specific layer (NOT shared .qa-restyle yet: Intelligence is the
only Stage-1 page carrying the inline form). Font sizes are explicit px
at the mockup-raw ramp (px = mockup_rem × 16, i.e. F = 1.0),
computed by formula — NOT via fontscale.py, which is non-idempotent.
See [[project_intelligence_fontscale]].
.error/.success/.global-message/.spinner are lifted here because
contact.scss scopes them under #myContactModal, which is absent on this
page (contact module dropped in _footer.php).
============================================================ */
.intelligence-page .form,
.living-insights-page .form,
.geotribes-page .form,
.about-page .form,
.geosmart-page .form,
.explorer-page .form {
/* label + its validation message share one line above the field; the
message (jQuery-validate) is the conditional "required" signal and
only takes space once populated */
/* right padding mirrors the button's left padding so the label centres;
the left padding doubles as the spinner's lane (see .spinner below) */
/* The spinner is pulled OUT of flow so it can't shove the label off
centre and can't shift it when it toggles on at submit time (an
in-flow spinner did both). It floats in the button's left padding,
clear of the centred label. fa-spinner is circular, so fa-spin's
rotation doesn't grow its box into the label. Vertical centring uses
top + margin (NOT transform — fa-spin owns transform). Initially
hidden: no modal-open event here to pre-hide it, and the shared
submit handler reveals it via showUncollapsed(). */
}
.intelligence-page .form .field-label,
.living-insights-page .form .field-label,
.geotribes-page .form .field-label,
.about-page .form .field-label,
.geosmart-page .form .field-label,
.explorer-page .form .field-label {
margin: 14px 0 4px;
/* the field's own label only — NOT the injected