/* ============================================================
AdPolice UI Guidelines & Design System
Based on Figma: AdPolice-BrandWatch
============================================================ */
/* ----------------------------------------
1. CSS CUSTOM PROPERTIES (Design Tokens)
---------------------------------------- */
:root {
/* --- COLOUR SCHEME: the four exchangeable roles (DEFAULT values) --------
Section 30 holds the presets ();
includes/layout.php fixes the site to "pastel" (2026-10-13). Every colour
variable below derives from these, so a scheme is ONE block of roles. */
--scheme-label: "Default";
--scheme-ink: #071437; /* near-black: text, darkest surfaces */
--scheme-navy: #002459; /* dark blue: section backgrounds */
--scheme-cta: #1093E4; /* bright CTA / accent colour */
--scheme-cta-rgb: 16, 147, 228; /* same colour as a triplet, for rgba() */
--scheme-grey: #F9FAFB; /* light grey surfaces */
/* Optional fine-tuning. A preset sets a value, or `initial` to use the
derived fallback written next to each use below. */
--scheme-cta-2: #2865BF; /* gradient partner (else cta darkened 15 %) */
--scheme-cta-bright: #4da3ff; /* luminous on navy (else cta + 20 % white) */
--scheme-cta-soft: #7cc4ff; /* soft tint on navy (else cta + 45 % white) */
--scheme-on-light: #1093E4; /* accent on white (else primary blue) */
--scheme-on-light-rgb: 16, 147, 228;
--scheme-cta-end: #1093E4; /* end of navy bands with white text (else primary) */
--scheme-btn-fg: #FFFFFF; /* text on cta fills (else white) */
/* --scheme-glow-rgb: unset = ambient glows on navy use the cta */
/* --- Colors (all derived) --- */
--color-primary-dark: var(--scheme-navy);
--color-primary: #2865BF; /* brand blue: outlines, links, on-light fallback */
--color-primary-rgb: 40, 101, 191;
--color-text-dark: var(--scheme-ink);
--color-text-body: #A1A5B7;
/* long text on white (imprint, privacy policy): #A1A5B7 is only 2.4:1 there,
this is ~6.4:1 (WCAG AA needs 4.5:1) */
--color-text-prose: color-mix(in srgb, var(--scheme-ink) 68%, #fff);
--color-text-white: #FFFFFF;
--color-bg-white: #FFFFFF;
--color-bg-light: var(--scheme-grey);
--color-bg-dark: var(--scheme-navy);
--color-bg-darker: var(--scheme-ink);
--color-navy-deep: color-mix(in srgb, var(--scheme-navy) 82%, #000); /* ~#001d4a */
--color-navy-lift: color-mix(in srgb, var(--scheme-navy) 72%, #0060E0); /* ~#003580 */
--color-nav-separator: rgba(255, 255, 255, 0.15);
--color-login-bg: rgba(255, 255, 255, 0.18);
--color-border-light: color-mix(in srgb, var(--scheme-navy) 8%, transparent);
--color-border-dark: rgba(255, 255, 255, 0.1);
/* Rule of thumb when styling: never use the cta directly as text.
on navy / dark surfaces -> --color-accent-on-dark (+ -bright / -soft)
on white / light grey -> --color-accent-on-light
either (section decides) -> --color-accent (switched per dark surface, section 30)
filled tiles + buttons -> --btn-bg + --btn-fg (glyph/text on the fill) */
--color-secondary: var(--scheme-cta); /* swatch, solid marks on navy */
--color-secondary-rgb: var(--scheme-cta-rgb);
--color-secondary-2: var(--scheme-cta-2, color-mix(in srgb, var(--scheme-cta) 85%, #000));
--color-accent-on-dark: var(--scheme-cta); /* text, icons, borders on navy */
--color-accent-bright: var(--scheme-cta-bright, color-mix(in srgb, var(--scheme-cta) 80%, #fff));
--color-accent-soft: var(--scheme-cta-soft, color-mix(in srgb, var(--scheme-cta) 55%, #fff));
--color-accent-on-light: var(--scheme-on-light, var(--color-primary));
--color-accent-on-light-rgb: var(--scheme-on-light-rgb, var(--color-primary-rgb));
--color-glow-rgb: var(--scheme-glow-rgb, var(--scheme-cta-rgb));
--gradient-cta-end: var(--scheme-cta-end, var(--color-primary));
--btn-from: var(--color-secondary-2);
--btn-to: var(--color-secondary);
--btn-fg: var(--scheme-btn-fg, #FFFFFF);
--btn-glow-rgb: var(--color-secondary-rgb);
--color-primary-light: var(--color-secondary); /* legacy alias */
--color-accent: var(--color-accent-on-light);
--color-accent-rgb: var(--color-accent-on-light-rgb);
--gradient-button: linear-gradient(to right, var(--btn-from), var(--btn-to));
--btn-bg: var(--gradient-button);
--btn-bg-hover: var(--btn-bg); /* .btn:hover also drops opacity to 0.9 */
/* --- Gradients --- */
--gradient-navy: linear-gradient(180deg, var(--color-navy-deep) 0%, var(--scheme-navy) 40%, var(--color-navy-lift) 100%);
--gradient-navy-diag: linear-gradient(135deg, var(--color-navy-deep) 0%, var(--scheme-navy) 40%, var(--color-navy-lift) 100%);
--gradient-nav: linear-gradient(to right, color-mix(in srgb, var(--scheme-navy) 90%, transparent), color-mix(in srgb, var(--gradient-cta-end) 90%, transparent));
--gradient-cta: linear-gradient(135deg, var(--scheme-navy) 0%, var(--gradient-cta-end) 100%);
/* --- Typography --- */
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 44px;
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--leading-hero: 60px;
--tracking-hero: -0.88px;
/* --- Spacing --- */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 116px;
/* --- Layout --- */
--container-max: 1218px;
--container-wide: 1500px;
--nav-height: 77px;
/* --- Border Radius --- */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ----------------------------------------
2. BASE RESET & TYPOGRAPHY
---------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
font-weight: var(--font-weight-regular);
color: var(--color-text-dark);
background-color: var(--color-bg-white);
line-height: var(--leading-normal);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
line-height: var(--leading-tight);
}
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-hero); line-height: var(--leading-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p {
font-size: var(--text-base);
color: var(--color-text-body);
font-weight: var(--font-weight-medium);
line-height: var(--leading-normal);
}
a {
text-decoration: none;
color: var(--color-primary);
transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent); }
img {
max-width: 100%;
height: auto;
display: block;
}
/* ----------------------------------------
3. LAYOUT
---------------------------------------- */
.container {
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.section__title {
text-align: center;
margin-bottom: var(--space-3xl);
font-size: var(--text-2xl);
line-height: 1.3;
}
/* ----------------------------------------
4. NAVIGATION BAR
---------------------------------------- */
.navbar {
height: var(--nav-height);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}
.navbar::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.10);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: -1;
transition: background var(--transition-smooth);
}
/* Navbar background variants */
.navbar--black::before {
background: rgba(0, 0, 0, var(--navbar-bg-opacity, 0.10));
}
.navbar--scrolled {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.navbar--scrolled::before {
background: rgba(0, 0, 0, var(--navbar-bg-opacity-scrolled, 0.25));
}
/* --- Header effect: subtle gradient --- */
.navbar--gradient::before {
background: linear-gradient(
90deg,
rgba(0, 0, 0, calc(var(--navbar-bg-opacity, 0.70) * 0.6)) 0%,
rgba(0, 0, 0, var(--navbar-bg-opacity, 0.70)) 50%,
rgba(0, 0, 0, calc(var(--navbar-bg-opacity, 0.70) * 0.6)) 100%
) !important;
}
/* --- Header effect: bottom shadow --- */
.navbar--shadow {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
}
/* --- Header effect: bottom border line --- */
.navbar--borderline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 70%, transparent 95%);
z-index: 0;
pointer-events: none;
}
.navbar .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.navbar__left {
display: flex;
align-items: center;
gap: 73px;
}
.navbar__right {
display: flex;
align-items: center;
gap: var(--space-md);
}
.navbar__logo {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 7px 17px;
}
.navbar__logo-text {
height: 19px;
width: auto;
}
.navbar__logo-star {
height: 24px;
width: auto;
}
/* Fallback for pages still using single SVG */
.navbar__logo img,
.navbar__logo > svg:only-child {
height: 15px;
width: auto;
}
.navbar__nav {
display: flex;
align-items: center;
gap: var(--space-xl);
list-style: none;
}
.navbar__nav a {
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--text-sm);
color: var(--color-text-white);
text-decoration: none;
transition: opacity var(--transition-fast);
}
.navbar__nav a:hover {
opacity: 0.8;
color: var(--color-text-white);
}
/* --- Nav CTA Button --- */
.navbar__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 18px;
border-radius: var(--radius-md);
font-family: var(--font-primary);
font-weight: var(--font-weight-semibold);
font-size: var(--text-sm);
color: #fff;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s ease, transform 0.1s ease;
}
.navbar__cta:hover {
opacity: 0.88;
color: #fff;
}
.navbar__cta:active {
transform: scale(0.97);
}
.navbar__cta--gradient {
background: linear-gradient(135deg, var(--btn-to) 0%, var(--btn-from) 100%);
color: var(--btn-fg);
}
.navbar__login {
display: inline-flex;
align-items: center;
justify-content: center;
width: 106px;
height: 36px;
background: var(--color-login-bg);
border-radius: var(--radius-md);
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--text-sm);
color: var(--color-text-white);
text-decoration: none;
transition: background var(--transition-fast);
}
.navbar__login:hover {
background: rgba(255, 255, 255, 0.28);
color: var(--color-text-white);
}
/* 44x44 tap target (WCAG 2.5.5 / Apple HIG); the three 24px bars and the X
animation are unchanged, and the negative margin keeps the bars where the
old 32px button had them (2026-10-10). */
.navbar__hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
margin-right: -6px;
background: none;
border: none;
cursor: pointer;
padding: 0 10px;
border-radius: var(--radius-sm);
}
.navbar__hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--color-text-white);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.navbar__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.active span:nth-child(2) { opacity: 0; }
.navbar__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ----------------------------------------
5. HERO SECTION
---------------------------------------- */
.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-top: calc(var(--nav-height) + var(--space-3xl));
padding-bottom: 80px;
overflow: hidden;
text-align: center;
background: var(--gradient-navy);
}
.hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
max-width: 769px;
}
.hero__title {
font-family: var(--font-primary);
font-weight: var(--font-weight-bold);
font-size: var(--text-3xl);
line-height: var(--leading-hero);
letter-spacing: var(--tracking-hero);
color: var(--color-text-white);
}
/* inline-block keeps "On autopilot." together - otherwise the line breaks
after "On" and leaves it orphaned at the end of the first line. */
.hero__title .accent { color: var(--color-accent-on-dark); display: inline-block; }
/* Hero CTA Buttons (between carousel and logo marquee) */
.hero__buttons {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
/* three buttons now - wrap rather than squash on narrow viewports */
flex-wrap: wrap;
gap: var(--space-md) var(--space-lg);
margin-top: var(--space-xl);
}
.hero__subtitle {
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.75);
line-height: var(--leading-normal);
}
/* diagonal clip removed — clean horizontal edge */
/* ----------------------------------------
5b. HERO SOURCES (Coverage Animation)
---------------------------------------- */
.hero__sources {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
margin-top: var(--space-lg);
text-align: center;
}
.hero__variant {
display: none;
}
.hero__variant--active {
display: block;
}
/* --- Trusted Logos (standalone white section) --- */
.trusted-logos {
background: var(--color-bg-light);
padding: 60px 0 60px;
text-align: center;
}
.trusted-logos__label {
display: block;
font-family: var(--font-primary);
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin-bottom: 40px;
line-height: var(--leading-tight);
}
/* Fixed rows (includes/trusted-logos.php, 2026-10-13): row-gap 0 and the
vertical spacing as item padding, so a break (its own zero-height flex line)
adds no extra gap. */
.trusted-logos__track {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 var(--space-2xl);
}
.trusted-logos__track .trusted-logos__item { padding: 11px 0; }
.trusted-logos__item {
display: inline-flex;
align-items: center;
white-space: nowrap;
user-select: none;
flex-shrink: 0;
}
.trusted-logos__item img {
height: 22px;
width: auto;
opacity: 0.75;
filter: brightness(0) saturate(0);
transition: opacity var(--transition-base), filter var(--transition-base);
}
.trusted-logos__item img[alt="Sephora"] { height: 16px; }
.trusted-logos__item img[alt="1&1"] { height: 34px; }
.trusted-logos__item img[alt="Semrush"] { height: 38px; }
.trusted-logos__item img[alt="Awin"] { height: 28px; }
/* Optical sizing for the launch set (Miro #8) - these marks carry a lot of
whitespace or a second line, so 22px reads too small next to the wordmarks. */
.trusted-logos__item img[alt="H&M"] { height: 27px; }
.trusted-logos__item img[alt="Audible"] { height: 32px; }
.trusted-logos__item img[alt="adidas"] { height: 24px; }
.trusted-logos__item img[alt="Emma"] { height: 24px; }
/* 12 logos: 2 x 6 on desktop, 3 x 4 on tablets, 4 x 3 on phones */
.trusted-logos__break {
display: none;
flex-basis: 100%;
height: 0;
}
@media (min-width: 861px) {
.trusted-logos__break--6 { display: block; }
}
/* .98: zoomed / scaled viewports can be 860.5px wide, which matched neither query */
@media (min-width: 521px) and (max-width: 860.98px) {
.trusted-logos__break--4 { display: block; }
}
@media (max-width: 520.98px) {
.trusted-logos__break--3 { display: block; }
.trusted-logos__track { column-gap: var(--space-md); } /* widest row of 3 = 308px: fits a 360px phone */
}
.trusted-logos__item:hover img {
opacity: 0.85;
filter: brightness(1) saturate(1);
}
.trusted-logos__capterra {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-top: 58px;
}
.trusted-logos__capterra-rating {
font-size: 20px;
color: var(--color-text-body);
}
.trusted-logos__capterra-rating strong {
color: var(--color-text-dark);
font-weight: var(--font-weight-bold);
}
.trusted-logos__capterra-stars {
font-size: 33px;
color: #FFB800;
letter-spacing: 2px;
line-height: 1;
margin-top: -3px;
}
.trusted-logos__capterra-source {
font-size: var(--text-sm);
color: var(--color-text-body);
font-weight: var(--font-weight-medium);
margin-top: -2px;
}
/* ----------------------------------------
7. BUTTONS
---------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--text-md);
line-height: 19.5px;
color: var(--btn-fg);
background: var(--btn-bg);
border: none;
border-radius: 12px;
padding: 10px 34px;
height: 50px;
cursor: pointer;
text-decoration: none;
transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-base);
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);
color: var(--btn-fg);
--btn-bg: var(--btn-bg-hover);
box-shadow: 0 4px 20px rgba(var(--btn-glow-rgb), 0.3);
}
.btn:active { transform: translateY(0); }
.btn--outline {
background: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
}
.btn--outline:hover {
background: var(--color-primary);
color: var(--color-text-white);
opacity: 1;
}
.btn--outline-light {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.35);
color: var(--color-text-white);
}
.btn--outline-light:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
color: var(--color-text-white);
opacity: 1;
}
.btn--white {
background: var(--color-bg-white);
color: var(--color-primary-dark);
font-weight: var(--font-weight-semibold);
}
.btn--white:hover {
color: var(--color-primary-dark);
box-shadow: 0 4px 24px rgba(255, 255, 255, 0.3);
}
/* ----------------------------------------
9. STATS DIVIDER
---------------------------------------- */
.stats {
position: relative;
padding: var(--space-3xl) 0;
background: var(--color-bg-dark);
overflow: hidden;
}
.stats::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 300px at 20% 50%, rgba(var(--color-glow-rgb), 0.12), transparent),
radial-gradient(ellipse 400px 200px at 80% 50%, rgba(40, 101, 191, 0.1), transparent);
pointer-events: none;
}
.stats__number {
display: block;
font-size: 48px;
font-weight: var(--font-weight-bold);
color: var(--color-text-white);
line-height: 1.1;
margin-bottom: var(--space-xs);
}
/* ----------------------------------------
11. PROCESS SECTION (How It Works)
---------------------------------------- */
.process {
position: relative;
padding: var(--space-4xl) 0;
background: #F3F4F7;
}
/* === DETECTION ENGINE: Particles funneling in === */
.process__enterprise {
position: relative;
display: flex;
align-items: center;
gap: var(--space-xl);
padding: var(--space-xl) var(--space-2xl) var(--space-xl) calc(160px + var(--space-xl));
background: var(--color-bg-white);
border-radius: var(--radius-xl);
border: 1px solid var(--color-border-light);
box-shadow: none;
margin-top: 48px;
transition: box-shadow 0.3s, border-color 0.3s;
overflow: hidden;
}
.process__enterprise:hover {
border-color: rgba(40, 101, 191, 0.15);
box-shadow: 0 4px 24px rgba(0, 36, 89, 0.08);
}
.process__enterprise-content { flex: 1; }
.process__enterprise-content h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin-bottom: var(--space-xs);
}
.process__enterprise-content p {
font-size: 14px;
line-height: var(--leading-relaxed);
}
.process__enterprise .btn {
flex-shrink: 0;
}
/* ----------------------------------------
12. PILLARS SECTION (Why AdPolice)
---------------------------------------- */
.pillars {
position: relative;
padding: var(--space-4xl) 0;
background: var(--color-bg-white);
}
/* ----------------------------------------
13. PROOF SECTION (Social Proof)
---------------------------------------- */
.proof {
position: relative;
padding: var(--space-4xl) 0;
background: var(--color-bg-light);
overflow: hidden;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ----------------------------------------
14. BRAND CHECK SECTION
---------------------------------------- */
.brandcheck {
position: relative;
padding: var(--space-2xl) 0;
background: var(--color-bg-dark);
overflow: hidden;
scroll-margin-top: 25vh;
}
.brandcheck > .container {
position: relative;
z-index: 1;
}
.brandcheck__step--active {
display: block;
}
.brandcheck__input {
flex: 1;
height: 50px;
padding: 0 var(--space-lg);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.06);
color: var(--color-text-white);
font-family: var(--font-primary);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
outline: none;
transition: border-color var(--transition-base), background var(--transition-base);
}
.brandcheck__input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.brandcheck__input:focus {
border-color: var(--color-accent-on-dark);
background: rgba(255, 255, 255, 0.1);
}
.brandcheck__btn {
flex-shrink: 0;
white-space: nowrap;
}
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ----------------------------------------
15. FINAL CTA SECTION
---------------------------------------- */
.finalcta {
position: relative;
padding: var(--space-4xl) 0;
background: var(--gradient-cta);
text-align: center;
overflow: hidden;
}
.finalcta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 800px 400px at 30% 0%, rgba(var(--color-glow-rgb), 0.2), transparent),
radial-gradient(ellipse 600px 300px at 70% 100%, rgba(0, 36, 89, 0.3), transparent);
pointer-events: none;
}
.finalcta .container { position: relative; }
.finalcta__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.8);
max-width: 620px;
margin: 0 auto var(--space-2xl);
line-height: var(--leading-relaxed);
}
.finalcta__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-lg);
}
.finalcta__link {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.65);
transition: color var(--transition-fast);
}
.finalcta__link:hover { color: var(--color-text-white); }
/* ----------------------------------------
16. FOOTER
---------------------------------------- */
.footer {
position: relative;
padding: var(--space-3xl) 0 var(--space-xl);
background: #000;
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: var(--space-2xl);
margin-bottom: var(--space-3xl);
}
.footer__logo {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: var(--space-md);
}
.footer__logo-text {
height: 23px;
width: auto;
}
.footer__logo-star {
height: 24px;
width: auto;
}
.footer__tagline {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-lg);
letter-spacing: 0.5px;
}
.footer__social {
display: flex;
gap: var(--space-md);
}
.footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.5);
transition: background var(--transition-base), color var(--transition-base);
}
.footer__social a:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--color-text-white);
}
.footer__col h2 { /* h2, not h4: keeps the heading order valid on pages with no h3 */
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-white);
margin-bottom: var(--space-lg);
text-transform: uppercase;
letter-spacing: 1px;
}
.footer__col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer__col a {
font-size: 14px;
font-weight: var(--font-weight-regular);
color: rgba(255, 255, 255, 0.65);
transition: color var(--transition-fast);
}
.footer__col a:hover { color: var(--color-text-white); }
.footer__bottom {
padding-top: var(--space-xl);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__bottom p {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.55);
text-align: center;
}
/* ----------------------------------------
17. BACK TO TOP
---------------------------------------- */
/* The Pipedrive LeadBooster chat is fixed at bottom:28 right:28 with
z-index 2147483647, so this button used to sit underneath it - visible as a
sliver and impossible to click (Daniel, 2026-10). Stack it above the chat
instead; 140px clears the greeting bubble as well as the collapsed icon. */
.back-to-top {
position: fixed;
bottom: 140px;
right: 32px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--btn-bg);
color: var(--btn-fg);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
z-index: 500;
box-shadow: 0 4px 16px rgba(0, 36, 89, 0.2);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
box-shadow: 0 4px 24px rgba(var(--btn-glow-rgb), 0.35);
}
/* ----------------------------------------
18. SCROLL REVEAL SYSTEM
---------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* on screen at load (set by the reveal script): no fade-in */
.reveal.reveal--instant { transition: none; }
/* ----------------------------------------
19. UTILITY CLASSES
---------------------------------------- */
.text-center { text-align: center; }
.text-white { color: var(--color-text-white) !important; }
.text-accent { color: var(--color-primary); }
.flex { display: flex; }
/* ----------------------------------------
20. PROBLEM SECTION
---------------------------------------- */
.problem {
position: relative;
padding: 96px 0 var(--space-4xl);
background: var(--color-bg-white);
}
#problem.problem {
padding-bottom: var(--space-2xl);
}
/* --- Iceberg: FULL BLEED, tip always visible --- */
/* The wrapper sits OUTSIDE .container on purpose - edge to edge, no radius.
Height grows with viewport width so the waterline stays in frame on wide screens. */
.iceberg-wrapper {
min-height: clamp(620px, 32vw, 880px);
width: 100%;
}
.iceberg-wrapper .iceberg-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* was an inline style + of the 2400px JPEG (177 KB) on every
device; now a WebP per viewport (2026-10-10). Not preloaded: it is below the fold. */
background-image: url('/Common/Assets/problem-iceberg-v11-wide-2400.webp');
background-size: cover !important;
/* TOP-anchored: the iceberg above the waterline is never cropped.
Whatever does not fit is taken off the bottom (the red underwater part). */
background-position: left top !important;
}
.iceberg-wrapper .iceberg-text-panel {
width: max(560px, 52%) !important;
max-width: 760px;
/* Keep the ENTIRE "Above the surface" block in the sky, not just its heading.
The art is cover-sized and top-anchored, so the waterline sits at
0.295 x (width / 2.357) = ~12.5vw down the band. Subtracting the block's
own height (~121px) plus a small gap puts its last line just above the
water, and it tracks the waterline as the viewport resizes. */
padding-top: max(20px, calc(12.5vw - 133px)) !important;
}
/* Keep the text off the screen edge on very wide viewports.
The panel is flush right, so the gutter has to come out of its own box. That
means max-width has to grow by exactly what padding-right takes, or the text
column collapses - at 2560px the old rule left 110px of the 760px panel and
wrapped the copy one word per line (Daniel, 2026-10). Both sides use the same
(100vw - 1500px)/2 term, so the readable column stays a constant ~632px. */
@media (min-width: 1600px) {
.iceberg-wrapper .iceberg-text-panel {
max-width: calc(760px + (100vw - 1500px) / 2) !important;
padding-right: calc((100vw - 1500px) / 2 + 56px) !important;
}
}
@media (max-width: 1600px) {
.iceberg-wrapper .iceberg-bg {
background-image: url('/Common/Assets/problem-iceberg-v11-wide-1600.webp');
background-image: image-set(url('/Common/Assets/problem-iceberg-v11-wide-1600.webp') 1x, url('/Common/Assets/problem-iceberg-v11-wide-2400.webp') 2x);
}
}
@media (max-width: 900px) {
.iceberg-wrapper {
min-height: 0;
}
/* sits behind a 0.86 scrim here - 900px is plenty */
.iceberg-wrapper .iceberg-bg { background-image: url('/Common/Assets/problem-iceberg-v11-wide-900.webp'); }
.iceberg-wrapper .iceberg-text-panel {
width: 100% !important;
max-width: none;
min-height: 460px !important;
/* full scrim so the text stays readable straight over the art */
background: rgba(0,10,20,0.86) !important;
padding: 40px 24px !important;
}
}
/* --- Full-width centered headline --- */
.problem__intro {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-3xl);
}
.problem__title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
line-height: 1.3;
margin-bottom: var(--space-lg);
}
.problem__numbers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
margin-bottom: var(--space-3xl);
}
.problem__stat {
text-align: center;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
background: var(--color-bg-light);
transition: transform 150ms ease, box-shadow 150ms ease;
}
.problem__stat:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 36, 89, 0.08);
}
.problem__stat-num {
display: block;
font-size: 36px;
font-weight: var(--font-weight-bold);
color: var(--color-primary);
line-height: 1.1;
margin-bottom: var(--space-xs);
}
.problem__stat-text {
font-size: 13px;
color: var(--color-text-body);
line-height: var(--leading-normal);
}
.problem__stat-source {
display: block;
font-size: 11px;
color: var(--color-text-body);
opacity: 0.6;
margin-top: var(--space-sm);
font-style: italic;
}
/* --- Animated Stat Cards --- */
.problem__stat--animated {
position: relative;
overflow: hidden;
}
.problem__stat--animated .problem__stat-num {
margin-top: var(--space-sm);
margin-bottom: var(--space-md);
}
.problem__stat-chart {
position: absolute;
inset: 15px;
pointer-events: none;
z-index: 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
.problem__stat-chart svg {
width: 100%;
height: 100%;
}
.problem__stat-chart--pie {
align-items: center;
opacity: 0.7;
}
.problem__stat-chart--pie svg {
width: 96%;
height: 96%;
}
.problem__stat--animated .problem__stat-num,
.problem__stat--animated .problem__stat-text,
.problem__stat--animated .problem__stat-source {
position: relative;
z-index: 1;
}
/* Chart line draw animation */
.problem__stat-chart--line .chart-line {
stroke-dasharray: 400;
stroke-dashoffset: 400;
}
.problem__stat--animated.revealed .problem__stat-chart--line .chart-line {
animation: drawLine 4s 1.5s ease forwards;
}
.problem__stat-chart--line .chart-fill {
opacity: 0;
}
.problem__stat--animated.revealed .problem__stat-chart--line .chart-fill {
animation: fadeIn 3s 2.5s ease forwards;
}
/* Bar grow animation */
.problem__stat-chart--bars .bar {
transform: scaleY(0);
transform-origin: bottom;
}
.problem__stat--animated.revealed .problem__stat-chart--bars .bar {
animation: growBar 4s 1.5s ease forwards;
}
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--2,
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--7 { animation-delay: 1.7s; }
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--3,
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--8 { animation-delay: 1.9s; }
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--4,
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--9 { animation-delay: 2.1s; }
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--5,
.problem__stat--animated.revealed .problem__stat-chart--bars .bar--10 { animation-delay: 2.3s; }
/* Pie arc animation — 38% of circumference (314.16 * 0.38 = 119.38) */
.problem__stat--animated.revealed .pie-arc {
animation: drawPie 4s 1.5s ease forwards;
}
@keyframes drawLine {
to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
to { opacity: 1; }
}
@keyframes growBar {
to { transform: scaleY(1); }
}
@keyframes drawPie {
to { stroke-dasharray: 119.38 314.16; }
}
.problem__kicker {
text-align: center;
font-size: var(--text-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
line-height: var(--leading-tight);
margin-top: var(--space-3xl);
margin-bottom: var(--space-3xl);
padding-top: var(--space-2xl);
position: relative;
}
.problem__kicker::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--color-primary);
border-radius: 2px;
}
.problem__kicker em {
color: var(--color-primary);
font-style: normal;
font-weight: var(--font-weight-bold);
}
/* --- Bridge to Fix --- */
.problem__bridge {
text-align: center;
font-size: var(--text-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
line-height: var(--leading-tight);
margin-top: var(--space-xl);
}
.problem__bridge em {
color: var(--color-primary);
font-style: normal;
font-weight: var(--font-weight-bold);
}
/* ----------------------------------------
22. STACKING SOLUTION CARDS
---------------------------------------- */
.stack {
position: relative;
padding: var(--space-4xl) 0 var(--space-xl);
background: var(--color-bg-light);
}
/* ----------------------------------------
23. PROMISES SECTION
---------------------------------------- */
/* Seamless dark-to-dark transition: promises -> stats */
/* .promises + .stats rule removed - stats now embedded in solution section */
/* ----------------------------------------
24. RESPONSIVE (continued)
---------------------------------------- */
@media (max-width: 1024px) {
.footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
.problem__numbers { grid-template-columns: repeat(2, 1fr); }
.process__enterprise {
flex-direction: column;
text-align: center;
padding: var(--space-xl);
}
.process__enterprise .btn { margin-top: var(--space-md); }
}
@media (max-width: 768px) {
:root {
--text-3xl: 32px;
--text-2xl: 26px;
--leading-hero: 42px;
--tracking-hero: -0.64px;
--text-base: 14px;
--space-5xl: 64px;
--space-4xl: 64px;
--space-3xl: 48px;
}
.hero {
min-height: auto;
padding-bottom: 140px;
padding-top: calc(var(--nav-height) + 32px);
}
.hero__content {
max-width: 90%;
gap: var(--space-sm);
}
.hero::after { height: 60px; }
.hero__sources { margin-top: var(--space-2xl); }
.navbar__nav { display: none; }
.navbar__nav.active {
display: flex;
flex-direction: column;
position: absolute;
top: var(--nav-height);
left: 0;
right: 0;
background: var(--color-bg-dark);
padding: var(--space-lg);
gap: var(--space-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.navbar__hamburger { display: flex; }
.stats__number { font-size: 36px; }
.footer__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
.problem__numbers { grid-template-columns: 1fr; }
.problem__stat-num { font-size: 28px; }
.brandcheck__input { width: 100%; }
.container {
padding-left: var(--space-md);
padding-right: var(--space-md);
}
.section__title { font-size: var(--text-2xl); margin-bottom: var(--space-2xl); }
.section__title br { display: none; }
}
@media (max-width: 480px) {
:root {
--text-3xl: 26px;
--leading-hero: 34px;
}
.hero { padding-bottom: 100px; }
.btn {
width: 100%;
max-width: 300px;
}
.stats__number { font-size: 32px; }
}
/* ----------------------------------------
25. TESTIMONIALS SECTION (Featured)
---------------------------------------- */
.testimonials {
position: relative;
padding: var(--space-4xl) 0;
background: var(--color-bg-white);
}
/* ----------------------------------------
30. BRAND CHECK LEAD TEXT
---------------------------------------- */
.brandcheck .section__title {
margin-bottom: 7px;
}
/* ----------------------------------------
HERO BACKGROUND VARIANTS
---------------------------------------- */
/* Background layers — only active one is visible */
.hero__bg-layer {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__bg-layer--active {
opacity: 1;
}
/* Variant: Mouse-Reactive Gradient */
.hero__bg-layer--mouse-reactive {
background: radial-gradient(
ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
var(--color-navy-lift) 0%,
var(--scheme-navy) 35%,
color-mix(in srgb, var(--scheme-navy) 60%, #000) 70%,
color-mix(in srgb, var(--scheme-navy) 40%, #000) 100%
);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Decorative orbs for mouse-reactive */
.hero__bg-layer--mouse-reactive::before,
.hero__bg-layer--mouse-reactive::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
transition: transform 0.3s ease-out;
}
.hero__bg-layer--mouse-reactive::before {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(var(--color-glow-rgb), 0.2) 0%, transparent 70%);
top: 10%;
left: 20%;
animation: orbFloat1 8s ease-in-out infinite;
}
.hero__bg-layer--mouse-reactive::after {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(40, 101, 191, 0.15) 0%, transparent 70%);
bottom: 10%;
right: 15%;
animation: orbFloat2 10s ease-in-out infinite;
}
@keyframes orbFloat1 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(40px, -30px); }
66% { transform: translate(-20px, 20px); }
}
@keyframes orbFloat2 {
0%, 100% { transform: translate(0, 0); }
33% { transform: translate(-30px, 25px); }
66% { transform: translate(25px, -15px); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* --- Calendly modal ------------------------------------------------------ */
.calmodal {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.calmodal[hidden] { display: none; }
.calmodal__overlay {
position: absolute;
inset: 0;
background: rgba(2, 10, 24, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.calmodal__dialog {
position: relative;
width: min(1000px, 100%);
height: min(760px, 92vh);
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
animation: calmodalIn 0.22s ease-out;
}
@keyframes calmodalIn {
from { opacity: 0; transform: translateY(12px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.calmodal__close {
position: absolute;
top: 10px;
right: 14px;
z-index: 2;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(7, 20, 55, 0.08);
color: #071437;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
}
.calmodal__close:hover { background: rgba(7, 20, 55, 0.16); }
.calmodal__body {
width: 100%;
height: 100%;
}
/* Calendly injects an iframe into this container */
.calmodal__body .calendly-inline-widget,
.calmodal__body iframe {
width: 100%;
height: 100%;
border: 0;
}
.calmodal__loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 0.95rem;
pointer-events: none;
}
.calmodal__loading a { pointer-events: auto; }
@media (max-width: 640px) {
.calmodal { padding: 0; }
.calmodal__dialog { height: 100vh; border-radius: 0; }
}
/* --- Hero ------------------------------------------------- */
.lp-hero {
position: relative;
background: var(--gradient-cta);
padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-4xl);
overflow: hidden;
}
.lp-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 900px 420px at 20% 0%, rgba(var(--color-glow-rgb), 0.25), transparent),
radial-gradient(ellipse 700px 360px at 85% 100%, rgba(0, 36, 89, 0.45), transparent);
pointer-events: none;
}
.lp-hero .container { position: relative; }
.lp-hero__inner { max-width: 820px; }
.lp-hero__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-full);
padding: 6px 16px;
margin-bottom: var(--space-lg);
}
.lp-hero__title {
font-size: clamp(2rem, 4vw, 3.1rem);
font-weight: var(--font-weight-bold);
line-height: 1.15;
color: var(--color-text-white);
margin: 0 0 var(--space-lg);
}
.lp-hero__title .text-accent { color: var(--color-accent-on-dark); }
.lp-hero__lead {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.82);
margin: 0 0 var(--space-2xl);
max-width: 680px;
}
.lp-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
}
/* --- Sections --------------------------------------------- */
.lp-section {
padding: var(--space-4xl) 0;
background: var(--color-bg-white);
}
.lp-section--light { background: var(--color-bg-light); }
.lp-section--dark {
background: var(--color-bg-dark);
color: var(--color-text-white);
}
.lp-section__head {
max-width: 760px;
margin: 0 auto var(--space-3xl);
text-align: center;
}
.lp-section__eyebrow {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--space-md);
}
.lp-section__title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
line-height: 1.25;
color: var(--color-text-dark);
margin: 0 0 var(--space-md);
}
.lp-section--dark .lp-section__title { color: var(--color-text-white); }
.lp-section--dark .lp-section__eyebrow { color: var(--color-accent-on-dark); }
.lp-section__intro {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0;
}
/* --- Card grid -------------------------------------------- */
.lp-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.lp-card {
background: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-xl);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.lp-section--light .lp-card { background: var(--color-bg-white); }
.lp-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0, 36, 89, 0.1);
}
.lp-section--dark .lp-card {
background: rgba(255, 255, 255, 0.05);
border-color: var(--color-border-dark);
}
.lp-card__icon {
width: 44px;
height: 44px;
border-radius: var(--radius-lg);
background: var(--btn-bg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
color: var(--btn-fg);
}
.lp-card__title {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: 0 0 var(--space-sm);
}
.lp-section--dark .lp-card__title { color: var(--color-text-white); }
.lp-card__text {
font-size: 14px;
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0;
}
/* --- Numbered steps --------------------------------------- */
.lp-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-2xl) var(--space-lg);
counter-reset: lpstep;
}
.lp-step {
position: relative;
padding: var(--space-2xl) var(--space-lg) var(--space-lg);
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
}
.lp-step::before {
counter-increment: lpstep;
content: counter(lpstep);
position: absolute;
top: calc(var(--space-lg) * -1);
left: var(--space-lg);
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--btn-bg);
color: var(--btn-fg);
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
}
.lp-step h3 {
font-size: var(--text-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: 0 0 var(--space-sm);
}
.lp-step p {
font-size: 14px;
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0;
}
/* --- Two-column split ------------------------------------- */
.lp-split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: var(--space-3xl);
align-items: start;
}
.lp-split h3 {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: 0 0 var(--space-md);
}
.lp-section--dark .lp-split h3 { color: var(--color-text-white); }
.lp-split p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0 0 var(--space-md);
}
/* a stat row inside a half-width column needs narrower tracks to stay on one line */
.lp-split .lp-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
/* --- Checklist -------------------------------------------- */
.lp-list {
list-style: none;
margin: 0;
padding: 0;
}
.lp-list li {
position: relative;
padding-left: 30px;
margin-bottom: var(--space-md);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
}
.lp-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
background: var(--btn-bg);
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.92);
}
.lp-section--dark .lp-list li,
.lp-section--dark .lp-split p { color: rgba(255, 255, 255, 0.75); }
.lp-section--dark .lp-list li::before { box-shadow: inset 0 0 0 4px var(--color-bg-dark); }
/* --- Stats ------------------------------------------------ */
.lp-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-lg);
text-align: center;
}
.lp-stat__value {
font-size: var(--text-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-accent);
line-height: 1.1;
}
.lp-stat__label {
font-size: var(--text-sm);
color: var(--color-text-body);
margin-top: var(--space-sm);
}
/* --- Prose (legal pages) ---------------------------------- */
.lp-prose {
max-width: 820px;
margin: 0 auto;
}
.lp-prose h2 {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: var(--space-2xl) 0 var(--space-md);
}
.lp-prose h2:first-child { margin-top: 0; }
.lp-prose h3 {
font-size: var(--text-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: var(--space-xl) 0 var(--space-sm);
}
.lp-prose p,
.lp-prose li {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-prose);
}
.lp-prose p { margin: 0 0 var(--space-md); }
.lp-prose ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.lp-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.lp-prose__meta {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
margin: 0;
}
.lp-prose__meta dt { color: var(--color-text-dark); font-weight: var(--font-weight-semibold); }
.lp-prose__meta dd { color: var(--color-text-prose); margin: 0; }
/* --- Offices / contact ------------------------------------ */
.lp-offices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-lg);
}
.lp-office {
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-xl);
}
.lp-office h3 {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-md);
}
.lp-office address {
font-style: normal;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
}
.lp-office a { color: var(--color-primary); }
/* --- office card with a photo ----------------------------- */
.lp-office--photo { padding: 0; overflow: hidden; }
.lp-office__photo {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.lp-office__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-smooth);
}
.lp-office--photo:hover .lp-office__photo img { transform: scale(1.04); }
.lp-office__body {
padding: var(--space-xl);
/* the three address blocks differ in length - pin the link to the bottom
so the cards read as one row instead of three ragged ones */
display: flex;
flex-direction: column;
flex: 1;
}
.lp-office--photo {
display: flex;
flex-direction: column;
}
.lp-office__link {
margin-top: auto;
padding-top: var(--space-lg);
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--transition-fast);
}
.lp-office__link:hover { gap: 11px; }
.lp-offices { align-items: stretch; }
/* --- Jobs ------------------------------------------------- */
.lp-job {
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
margin-bottom: var(--space-lg);
}
.lp-job__title {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: 0 0 var(--space-sm);
}
.lp-job__meta {
font-size: var(--text-sm);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-xl);
}
.lp-job h4 {
font-size: var(--text-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: var(--space-xl) 0 var(--space-md);
}
/* --- Bottom CTA (reuses .finalcta) ------------------------ */
.lp-cta .section__title { margin-bottom: var(--space-lg); }
@media (max-width: 767px) {
.lp-hero { padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-3xl); }
.lp-section { padding: var(--space-3xl) 0; }
.lp-prose__meta { grid-template-columns: 1fr; gap: 0; }
.lp-prose__meta dd { margin-bottom: var(--space-md); }
}
/* ============================================================
21. CASE STUDIES (/case-studies/)
Cover + brand lockup per study, and the order form the legacy
page had: tick the studies you want, leave your details.
============================================================ */
.cs-study {
display: grid;
grid-template-columns: 360px 1fr;
gap: var(--space-3xl);
align-items: center;
}
/* Mirrored rows swap the TRACKS, not just the visual order. Using `order`
alone let the cover be auto-placed into the 1fr column, which blew it up
to ~790px on every second study. */
.cs-study--flip { grid-template-columns: 1fr 360px; }
.cs-study--flip .cs-study__cover { grid-column: 2; grid-row: 1; }
.cs-study--flip .cs-study__body { grid-column: 1; grid-row: 1; }
/* --- the PDF cover ---------------------------------------- */
.cs-study__cover {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 36, 89, 0.25);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
background: var(--color-bg-white);
}
.cs-study__cover:hover {
transform: translateY(-6px);
box-shadow: 0 32px 72px rgba(0, 36, 89, 0.32);
}
.cs-study__cover img {
display: block;
width: 100%;
height: auto;
}
.lp-section--dark .cs-study__cover { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
/* --- the brand, which is the point of the whole section ---- */
.cs-study__brand {
display: flex;
align-items: center;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
flex-wrap: wrap;
}
.cs-study__logo {
height: 46px;
width: auto;
max-width: 220px;
object-fit: contain;
}
/* the dark band needs the marks knocked out to white */
.lp-section--dark .cs-study__logo { filter: brightness(0) invert(1); }
.cs-study__focus {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-primary);
border-left: 2px solid var(--color-primary);
padding-left: var(--space-md);
}
.lp-section--dark .cs-study__focus {
color: var(--color-accent-on-dark);
border-left-color: var(--color-accent-on-dark);
}
.cs-study__title {
font-size: var(--text-xl);
font-weight: var(--font-weight-bold);
line-height: 1.3;
color: var(--color-text-dark);
margin: 0 0 var(--space-md);
}
.lp-section--dark .cs-study__title { color: var(--color-text-white); }
.cs-study__body p {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0 0 var(--space-md);
}
.cs-study__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl);
margin: var(--space-xl) 0;
}
.cs-study__stat-value {
font-size: 2.1rem;
font-weight: var(--font-weight-bold);
color: var(--color-accent);
line-height: 1.1;
}
.cs-study__stat-label {
font-size: var(--text-sm);
color: var(--color-text-body);
margin-top: 2px;
max-width: 190px;
}
/* --- order form ------------------------------------------- */
.cs-order {
max-width: 920px;
margin: 0 auto;
}
.cs-order__picks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.cs-pick {
display: block;
cursor: pointer;
border: 2px solid var(--color-border-light);
border-radius: var(--radius-xl);
background: var(--color-bg-white);
padding: var(--space-md);
text-align: center;
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.cs-pick:hover { transform: translateY(-3px); }
.cs-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cs-pick__thumb {
width: 100%;
max-width: 118px;
margin: 0 auto var(--space-md);
border-radius: var(--radius-sm);
box-shadow: 0 6px 18px rgba(0, 36, 89, 0.16);
display: block;
}
.cs-pick__name {
font-size: var(--text-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
}
.cs-pick__focus {
font-size: var(--text-xs);
color: var(--color-text-body);
margin-top: 2px;
display: block;
}
.cs-pick__tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: var(--space-md);
border-radius: var(--radius-full);
border: 2px solid var(--color-border-light);
color: transparent;
font-size: 13px;
font-weight: var(--font-weight-bold);
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.cs-pick input:checked ~ .cs-pick__tick {
background: var(--btn-bg);
border-color: transparent;
color: var(--btn-fg);
}
.cs-pick:has(input:checked) {
border-color: var(--color-primary);
box-shadow: 0 12px 32px rgba(40, 101, 191, 0.18);
}
/* --- the fields ------------------------------------------- */
.cs-form__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.cs-field label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-dark);
margin-bottom: 6px;
}
.cs-field input {
width: 100%;
height: 50px;
padding: 0 var(--space-md);
font-family: var(--font-primary);
font-size: var(--text-base);
color: var(--color-text-dark);
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.cs-field input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(40, 101, 191, 0.15);
}
.cs-form__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
margin-top: var(--space-xl);
flex-wrap: wrap;
}
.cs-form__required {
font-size: var(--text-sm);
color: var(--color-text-body);
}
.cs-form__msg {
margin-top: var(--space-lg);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-xl);
display: none;
}
.cs-form__msg--error {
display: block;
color: #B42318;
background: rgba(180, 35, 24, 0.08);
}
.cs-form__msg--success {
display: block;
color: #067647;
background: rgba(6, 118, 71, 0.08);
}
@media (max-width: 900px) {
.cs-study,
.cs-study--flip {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.cs-study--flip .cs-study__cover,
.cs-study--flip .cs-study__body { grid-column: 1; grid-row: auto; }
.cs-study__cover { max-width: 300px; }
.cs-form__grid { grid-template-columns: 1fr; }
}
/* ============================================================
22. CONTACT (/contact/) and the shared contact-form modal
============================================================ */
.ct-ways {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
align-items: stretch;
}
.ct-way {
display: flex;
flex-direction: column;
background: var(--color-bg-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.ct-way:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0, 36, 89, 0.1);
}
.ct-way__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: var(--btn-bg);
color: var(--btn-fg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-lg);
}
.ct-way__title {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
margin: 0 0 var(--space-sm);
}
.ct-way__text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0;
}
/* pins the buttons / numbers to the same baseline across all three cards */
.ct-way__foot {
margin-top: auto;
padding-top: var(--space-xl);
}
.ct-phone + .ct-phone { margin-top: var(--space-lg); }
.ct-phone__number {
display: block;
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-decoration: none;
}
.ct-phone__number:hover { text-decoration: underline; }
.ct-phone__meta {
display: block;
font-size: var(--text-sm);
color: var(--color-text-body);
margin-top: 2px;
}
/* --- the contact form inside the modal -------------------- */
.calmodal__dialog--form {
width: min(720px, 100%);
height: auto;
max-height: 92vh;
overflow-y: auto;
}
.ctform { padding: var(--space-3xl) var(--space-2xl) var(--space-2xl); }
.ctform__title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-dark);
margin: 0 0 var(--space-sm);
}
.ctform__lead {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
margin: 0 0 var(--space-2xl);
}
/* the modal reuses the case-study field styles; these two controls are new */
.cs-field select,
.cs-field textarea {
width: 100%;
padding: var(--space-md);
font-family: var(--font-primary);
font-size: var(--text-base);
color: var(--color-text-dark);
background: var(--color-bg-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.cs-field select { height: 50px; padding: 0 var(--space-md); }
.cs-field textarea { resize: vertical; min-height: 120px; line-height: var(--leading-relaxed); }
.cs-field select:focus,
.cs-field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(40, 101, 191, 0.15);
}
@media (max-width: 640px) {
.ctform { padding: var(--space-2xl) var(--space-lg) var(--space-lg); }
}
/* ============================================================
23. COMPETITOR ALTERNATIVE PAGES
/adpolice-alternative/ and the three dedicated comparisons
============================================================ */
/* Moved to Common/lp-alternatives.css (2026-10-09), loaded only by these
four pages via adp_head('css'). Includes the comparison table (.cmp),
the review cards (.rev, formerly section 25) and the Miro layouts. */
/* ============================================================
24. GOOGLE TRADEMARK CERTIFIED PARTNER
Band + chip. Rendered by adp_google_certified() / _badge()
in includes/layout.php.
============================================================ */
.gcert {
background: var(--color-bg-dark);
padding: var(--space-3xl) 0;
}
.gcert--light {
background: var(--color-bg-light);
}
.gcert__inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.gcert__eyebrow {
display: block;
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--space-sm);
}
.gcert--light .gcert__eyebrow { color: var(--color-primary); }
.gcert__title {
font-size: var(--text-2xl);
font-weight: var(--font-weight-bold);
line-height: var(--leading-tight);
color: var(--color-text-white);
margin: 0 0 var(--space-md);
}
.gcert--light .gcert__title { color: var(--color-text-dark); }
.gcert__text {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
.gcert--light .gcert__text { color: var(--color-text-body); }
.gcert__list {
list-style: none;
margin: 0;
padding: 0;
}
.gcert__list li {
position: relative;
padding: var(--space-md) 0 var(--space-md) 34px;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.gcert--light .gcert__list li {
color: var(--color-text-dark);
border-bottom-color: var(--color-border-light);
}
.gcert__list li:last-child { border-bottom: none; }
.gcert__list li::before {
content: '\2713';
position: absolute;
left: 0;
top: var(--space-md);
width: 21px;
height: 21px;
border-radius: var(--radius-full);
background: rgba(var(--color-accent-rgb), 0.18);
color: var(--color-accent);
font-size: 12px;
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
justify-content: center;
}
.gcert--light .gcert__list li::before {
background: rgba(40, 101, 191, 0.12);
color: var(--color-primary);
}
@media (max-width: 900px) {
.gcert__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}
/* Proof strip under the client logos: the customer rating. (The Google
certification moved to the hero as a seal on 2026-10-09.) */
.trusted-logos__proof {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
/* ============================================================
26. FAQ ACCORDION + FIGURES BAND
Rendered by adp_faq() / adp_stat_band() in includes/layout.php.
============================================================ */
.faq__list {
max-width: 880px;
margin: 0 auto;
}
.faq__item {
border-bottom: 1px solid var(--color-border-light);
}
.faq__item:first-child { border-top: 1px solid var(--color-border-light); }
.faq__q {
list-style: none;
cursor: pointer;
padding: var(--space-lg) 44px var(--space-lg) 0;
position: relative;
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--leading-snug);
color: var(--color-text-dark);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
content: '+';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border-radius: var(--radius-full);
background: rgba(40, 101, 191, 0.1);
color: var(--color-primary);
font-size: 17px;
font-weight: var(--font-weight-bold);
line-height: 26px;
text-align: center;
transition: background var(--transition-fast);
}
.faq__item[open] .faq__q::after { content: '\2013'; }
.faq__q:hover::after { background: rgba(40, 101, 191, 0.2); }
.faq__a {
padding: 0 44px var(--space-xl) 0;
}
.faq__a p {
margin: 0;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text-body);
}
/* --- figures band ------------------------------------------- */
.statband__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-xl);
}
.statband__item {
padding: var(--space-xl) var(--space-lg);
border-left: 2px solid rgba(var(--color-secondary-rgb), 0.35);
}
.statband__figure {
font-size: 2.6rem;
font-weight: var(--font-weight-bold);
line-height: 1.1;
color: var(--color-accent-on-dark);
margin-bottom: var(--space-sm);
}
.statband__label {
font-size: var(--text-base);
line-height: var(--leading-snug);
color: var(--color-text-white);
margin-bottom: var(--space-sm);
}
.statband__source {
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.statband__note {
margin-top: var(--space-xl);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 600px) {
.statband__figure { font-size: 2.1rem; }
}
/* ============================================================
27. HERO BRAND-CHECK CARD
.hero--cta-form: "Request a demo" followed by the brand-check card. The card
is a complete brand check (brand -> email -> done, Common/brandcheck.js), one
Pipedrive path. It owns the #brand-check anchor, so any "/#brand-check" link
opens it via :target.
============================================================ */
.hero__checkcard {
display: none;
position: relative;
width: 100%;
max-width: 560px;
margin-top: var(--space-2xl);
padding: 20px 22px 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
box-shadow: 0 18px 40px rgba(0, 10, 40, 0.3);
text-align: left;
scroll-margin-top: calc(var(--nav-height) + 24px);
}
.hero--cta-form .hero__checkcard,
.hero__checkcard:target { display: block; }
.hero--cta-form .hero__buttons {
flex-direction: column;
gap: 0;
}
.hero--cta-form .hero__btn-check { display: none; }
/* the demo button first, the card below it */
.hero--cta-form .hero__btn-demo { order: -1; }
.hero__checkcard-eyebrow {
display: block;
margin-bottom: 4px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent-bright);
}
.hero__checkcard-title {
margin: 0 0 var(--space-md);
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: #ffffff;
}
.hero__checkcard-title span {
display: block;
margin-top: 2px;
font-size: 14px;
font-weight: var(--font-weight-regular);
color: rgba(255, 255, 255, 0.65);
}
/* the three steps */
.hero__checkstep { display: none; }
.hero__checkstep--active {
display: block;
animation: fadeSlideUp 0.4s ease both;
}
.hero__check {
display: flex;
gap: var(--space-sm);
}
.hero__check-error {
margin: var(--space-sm) 0 0;
font-size: 13px;
color: #fca5a5;
}
.hero__check-success {
margin: 0 0 var(--space-md);
font-size: 15px;
font-weight: var(--font-weight-medium);
line-height: 1.5;
color: #ffffff;
}
/* empty brand field (both brand-check forms) */
.brandcheck__input.is-invalid { border-color: #f87171; }
/* next to the card the demo is the secondary action (.btn--outline-light values) */
.hero--cta-form .hero__btn-demo {
background: transparent;
color: var(--color-text-white);
border: 2px solid rgba(255, 255, 255, 0.35);
}
.hero--cta-form .hero__btn-demo:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-white);
border-color: rgba(255, 255, 255, 0.6);
opacity: 1;
}
@media (max-width: 600px) {
.hero__check { flex-direction: column; }
.hero__check .btn,
.hero--cta-form .hero__btn-demo { width: 100%; }
}
/* .brandcheck__input is flex: 1 (basis 0) - fine in a row, but in a stacked
column it collapses the field's height. Both brand-check forms stack on phones. */
@media (max-width: 768px) {
.hero__check .brandcheck__input { flex: none; }
}
/* ============================================================
28. WAYS TO WORK WITH ADPOLICE (homepage section_platform)
Card shell mirrors .pillars--dark; the visuals are HTML mock-ups
(app window, code, chat) so they stay crisp at any resolution.
============================================================ */
.ways {
position: relative;
padding: var(--space-4xl) 0;
background: var(--gradient-navy-diag);
overflow: hidden;
}
.ways .container { position: relative; z-index: 1; }
/* the default accent is too dark on this background; match the hero */
.ways .text-accent { color: var(--color-accent-on-dark); }
.ways__subtitle {
text-align: center;
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.7);
max-width: 750px;
margin: calc(var(--space-2xl) * -1) auto var(--space-2xl);
line-height: var(--leading-relaxed);
}
.ways__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.ways__card {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.ways__card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
/* extra top padding: the keyword plate hangs ~27px into the body */
.ways__body { padding: calc(var(--space-xl) + 20px) var(--space-xl) var(--space-xl); }
.ways__card h3 {
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: #ffffff;
margin-bottom: var(--space-lg);
}
.ways__bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ways__bullets li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.82rem;
font-weight: var(--font-weight-medium);
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.ways__bullets li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-accent-bright);
flex-shrink: 0;
margin-top: 6px;
}
/* --- visual stage --- */
.ways__visual {
position: relative;
height: 240px;
padding: 26px 24px 0;
background:
radial-gradient(ellipse at 50% 120%, rgba(var(--color-glow-rgb), 0.35) 0%, transparent 65%),
rgba(0, 10, 30, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.ways__window {
height: 100%;
border-radius: 10px 10px 0 0;
background: #f5f7fb;
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.35);
overflow: hidden;
font-family: var(--font-primary);
}
.ways__bar {
display: flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 10px;
background: #e6eaf2;
}
.ways__bar i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c3cad8;
}
.ways__bar span {
margin-left: 8px;
font-size: 10px;
font-weight: var(--font-weight-medium);
color: #7a8299;
}
/* platform window */
.ways__app { display: flex; height: calc(100% - 26px); }
.ways__app-side {
display: flex;
flex-direction: column;
gap: 9px;
width: 34px;
padding: 12px 9px;
background: #002459;
}
.ways__app-side b {
display: block;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.25);
}
.ways__app-side b.is-on { background: var(--color-secondary); }
.ways__app-main { flex: 1; padding: 12px; }
.ways__kpis { display: flex; gap: 8px; margin-bottom: 10px; }
.ways__kpis div {
flex: 1;
padding: 7px 9px;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 36, 89, 0.08);
}
.ways__kpis em {
display: block;
font-style: normal;
font-size: 8.5px;
color: #8a93a8;
}
.ways__kpis strong {
font-size: 15px;
font-weight: var(--font-weight-semibold);
color: var(--color-text-dark);
}
.ways__bars {
display: flex;
align-items: flex-end;
gap: 6px;
height: 58px;
padding: 8px;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 36, 89, 0.08);
}
.ways__bars span {
flex: 1;
height: var(--h);
border-radius: 2px 2px 0 0;
background: linear-gradient(to top, var(--color-secondary-2), var(--color-secondary));
}
/* the card's keyword (UI / API / MCP), a light frosted plate straddling the seam
between visual and text - present, but it hides nothing in the mock-ups.
Navy on translucent white reads over the light windows and the dark code one. */
.ways__keyword {
position: absolute;
left: var(--space-xl);
top: calc(240px - 27px); /* .ways__visual height minus half the plate */
z-index: 2;
padding: 2px 18px 4px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 10px 30px rgba(0, 10, 40, 0.35);
font-size: 40px;
font-weight: var(--font-weight-bold);
line-height: 1.2;
letter-spacing: 0.02em;
color: var(--color-primary-dark);
}
/* API window */
.ways__window--code { background: #0b1530; }
.ways__window--code .ways__bar { background: #121e3d; }
.ways__window--code .ways__bar i { background: #2a3a63; }
.ways__window--code .ways__bar span { color: #7f8db3; }
/* MCP chat window */
.ways__chat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.ways__msg {
max-width: 88%;
margin: 0;
padding: 8px 11px;
font-size: 11px;
line-height: 1.45;
border-radius: 12px;
}
.ways__msg--user {
align-self: flex-end;
border-bottom-right-radius: 4px;
background: #2865BF;
color: #ffffff;
}
.ways__msg--ai {
align-self: flex-start;
border-bottom-left-radius: 4px;
background: #ffffff;
color: #3d4660;
box-shadow: 0 1px 3px rgba(0, 36, 89, 0.1);
}
.ways__tool {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 4px 9px;
border-radius: 999px;
font-size: 9.5px;
font-weight: var(--font-weight-medium);
color: #15803d;
background: #dcfce7;
}
@media (max-width: 1024px) {
.ways__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.ways__grid { grid-template-columns: 1fr; }
.ways__card { max-width: 500px; margin: 0 auto; }
}
/* --- the figure --- */
.hero-parker {
position: relative;
height: 620px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.hero-parker__halo {
position: absolute;
left: 50%;
top: 48%;
width: 560px;
height: 560px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, 0.1);
background: radial-gradient(circle, rgba(var(--color-glow-rgb), 0.3) 0%, rgba(var(--color-glow-rgb), 0.08) 45%, transparent 70%);
pointer-events: none;
}
.hero-parker__img {
position: relative;
height: 100%;
width: auto;
max-width: 100%;
object-fit: contain;
filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}
/* --- split layout while Parker is the active variant --- */
.hero:has(#variant-parker.hero__variant--active) {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: 1fr auto auto 1fr;
grid-template-areas:
". visual"
"content visual"
"buttons visual"
". visual";
column-gap: var(--space-2xl);
padding-left: max(24px, calc((100% - 1240px) / 2));
padding-right: max(24px, calc((100% - 1240px) / 2));
padding-bottom: 40px;
text-align: left;
}
.hero:has(#variant-parker.hero__variant--active) .hero__sources { display: contents; }
.hero:has(#variant-parker.hero__variant--active) .hero__content {
grid-area: content;
align-items: flex-start;
max-width: 600px;
}
.hero:has(#variant-parker.hero__variant--active) .hero__title { font-size: 48px; }
/* the
balances the centred layout; in a 600px column it only breaks badly */
.hero:has(#variant-parker.hero__variant--active) .hero__subtitle br { display: none; }
.hero:has(#variant-parker.hero__variant--active) .hero__subtitle { font-size: var(--text-md); }
.hero:has(#variant-parker.hero__variant--active) #variant-parker { grid-area: visual; }
.hero:has(#variant-parker.hero__variant--active) .hero__buttons {
grid-area: buttons;
justify-content: flex-start;
align-items: flex-start;
margin-top: var(--space-xl);
}
@media (max-width: 960px) {
.hero:has(#variant-parker.hero__variant--active) {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas: "content" "buttons" "visual";
text-align: center;
}
.hero:has(#variant-parker.hero__variant--active) .hero__content {
align-items: center;
margin: 0 auto;
}
.hero:has(#variant-parker.hero__variant--active) .hero__title { font-size: var(--text-3xl); }
.hero:has(#variant-parker.hero__variant--active) .hero__buttons {
justify-content: center;
align-items: center;
}
.hero-parker { height: 460px; max-width: 560px; margin: var(--space-xl) auto 0; }
.hero-parker__halo { width: 400px; height: 400px; }
}
@media (max-width: 600px) {
.hero-parker { height: 380px; }
.hero-parker__halo { width: 320px; height: 320px; }
}
/* ============================================================
30. COLOUR SCHEMES
One block per preset. switches it;
no attribute (or "default") = the :root values in section 1.
The site is fixed to "pastel" since 2026-10-13: includes/layout.php
writes data-scheme="pastel" on (the Section Manager switch is gone).
Another scheme = change that attribute.
============================================================ */
/* Every surface that is navy/dark: context accent flips to the on-dark one. */
.hero:not(.hero--light),
.lp-hero,
.lp-section--dark,
.gcert:not(.gcert--light),
.finalcta,
.footer,
.stats,
.brandcheck,
.ways,
.process--stage {
--color-accent: var(--color-accent-on-dark);
--color-accent-rgb: var(--color-glow-rgb);
}
/* Presets set the four roles (ink, navy, cta, grey) and, optionally, the
fine-tuning tokens from section 1. `initial` = use the derived fallback.
Ink, navy and grey are inherited from :root unless a preset sets them. */
/* --- Pastel blue (Markus, 2026-10-09) ---
A pale cta shines on navy but vanishes on white, so on-light accents
fall back to the primary blue, and filled buttons get navy text. */
:root[data-scheme="pastel"] {
--scheme-label: "Pastel blue";
--scheme-cta: #ACD1FD;
--scheme-cta-rgb: 172, 209, 253;
--scheme-cta-2: #84B1EA; /* 70 % #ACD1FD + 30 % #2865BF */
--scheme-cta-bright: initial; /* -> #BDDAFD */
--scheme-cta-soft: initial; /* -> #D2E6FE */
--scheme-on-light: initial; /* -> primary #2865BF */
--scheme-on-light-rgb: initial;
--scheme-cta-end: initial; /* -> primary #2865BF */
--scheme-btn-fg: var(--scheme-navy); /* 6.8:1 on #84B1EA, 9.7:1 on #ACD1FD */
}
/* --- Yellow (Daniel's Miro mock-ups: #FFD200 fills, #012754 text on them) ---
Yellow on white is unreadable, so on-light accents use the primary blue.
Ambient glows on navy stay blue: low-alpha yellow over navy turns olive. */
:root[data-scheme="yellow"] {
--scheme-label: "Yellow";
--scheme-cta: #FFD200;
--scheme-cta-rgb: 255, 210, 0;
--scheme-cta-2: #FFC400; /* slight warm partner for the button gradient */
--scheme-cta-bright: #FFD200;
--scheme-cta-soft: #FFE27A;
--scheme-on-light: initial; /* -> primary #2865BF */
--scheme-on-light-rgb: initial;
--scheme-glow-rgb: 40, 101, 191;
--scheme-cta-end: initial; /* -> primary #2865BF */
--scheme-btn-fg: #012754; /* Daniel's navy on yellow, 12:1 */
}
/* ============================================================
32. MOBILE NAVBAR FIT
At 375px logo + "Talk to Us" + Login + hamburger needed ~500px, so the
hamburger sat off-screen on every page. On phones Login moves into the
menu (.navbar__nav-login) and the logo loses its side padding.
============================================================ */
.navbar__nav-login { display: none; }
@media (max-width: 768px) {
.navbar__login { display: none; }
.navbar__nav.active .navbar__nav-login { display: list-item; }
.navbar__logo { padding-left: 0; padding-right: 0; }
.navbar__right { gap: var(--space-sm); }
.navbar__cta { padding: 0 14px; }
}
@media (max-width: 360px) {
.navbar__logo-text { height: 16px; }
}
/* ============================================================
32b. NAV SOLUTIONS DROPDOWN (adp_nav() in includes/layout.php)
Desktop: a panel under "Solutions", opened by hover / keyboard
focus / click (script next to the nav markup sets .is-open).
<= 960px: the hamburger menu takes over (was 768px - the extra
chevron + panel no longer fit the bar between 769 and 960px) and
the panel becomes an expandable group inside it.
============================================================ */
.navbar__dd { position: relative; }
.navbar__dd-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
font-size: var(--text-sm);
color: var(--color-text-white);
transition: opacity var(--transition-fast);
}
.navbar__dd-toggle:hover { opacity: 0.8; }
.navbar__dd-toggle:focus-visible,
.navbar__dd-item:focus-visible,
.navbar__dd-all:focus-visible {
outline: 2px solid var(--color-accent-on-dark);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
.navbar__dd-chevron { display: inline-flex; }
.navbar__dd-chevron svg {
width: 14px;
height: 14px;
stroke-width: 2.2;
transition: transform var(--transition-base);
}
.navbar__dd.is-open .navbar__dd-chevron svg { transform: rotate(180deg); }
/* the panel; padding-top is an invisible hover bridge from the toggle */
.navbar__dd-panel {
position: absolute;
top: 100%;
left: 50%;
width: 430px;
padding-top: 22px;
transform: translate(-50%, 6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear 250ms;
z-index: 1001;
}
.navbar__dd.is-open .navbar__dd-panel {
transform: translate(-50%, 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s;
}
.navbar__dd-list {
list-style: none;
margin: 0;
padding: 8px;
background: var(--color-bg-white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: 0 18px 48px rgba(0, 10, 40, 0.28);
}
.navbar__nav .navbar__dd-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px;
border-radius: var(--radius-lg);
color: var(--color-text-dark);
transition: background var(--transition-fast);
}
.navbar__nav .navbar__dd-item:hover {
opacity: 1;
color: var(--color-text-dark);
background: var(--color-bg-light);
}
.navbar__dd-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: var(--radius-lg);
background: rgba(var(--color-accent-on-light-rgb), 0.1);
color: var(--color-accent-on-light);
display: flex;
align-items: center;
justify-content: center;
}
.navbar__dd-icon svg { width: 20px; height: 20px; }
.navbar__dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.navbar__dd-title {
font-size: 14px;
font-weight: var(--font-weight-semibold);
line-height: 1.3;
color: var(--color-text-dark);
}
.navbar__dd-desc {
font-size: var(--text-xs);
font-weight: var(--font-weight-regular);
line-height: 1.45;
color: rgba(7, 20, 55, 0.6);
}
.navbar__nav .navbar__dd-all {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
background: var(--color-bg-light);
border-top: 1px solid var(--color-border-light);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
box-shadow: 0 18px 48px rgba(0, 10, 40, 0.28);
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
}
.navbar__nav .navbar__dd-all:hover { opacity: 1; color: var(--color-primary-dark); }
/* --- <= 960px: hamburger menu + expandable group ----------- */
@media (max-width: 960px) {
.navbar__nav { display: none; }
.navbar__nav.active {
display: flex;
flex-direction: column;
position: absolute;
top: var(--nav-height);
left: 0;
right: 0;
max-height: calc(100vh - var(--nav-height));
overflow-y: auto;
background: var(--color-bg-dark);
padding: var(--space-lg);
gap: var(--space-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.navbar__hamburger { display: flex; }
.navbar__dd {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
align-items: center;
}
.navbar__dd-panel {
position: static;
display: none;
width: 100%;
padding-top: var(--space-sm);
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: none;
}
.navbar__dd.is-open .navbar__dd-panel { display: block; transform: none; }
.navbar__dd-list {
padding: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border-dark);
border-bottom: none;
box-shadow: none;
}
.navbar__nav .navbar__dd-item { padding: 10px; color: var(--color-text-white); }
.navbar__nav .navbar__dd-item:hover { color: var(--color-text-white); background: rgba(255, 255, 255, 0.06); }
.navbar__dd-icon {
width: 34px;
height: 34px;
background: rgba(255, 255, 255, 0.08);
color: var(--color-accent-on-dark);
}
.navbar__dd-icon svg { width: 18px; height: 18px; }
.navbar__dd-title { color: var(--color-text-white); }
.navbar__dd-desc { color: rgba(255, 255, 255, 0.6); }
.navbar__nav .navbar__dd-all {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border-dark);
box-shadow: none;
color: var(--color-accent-on-dark);
}
.navbar__nav .navbar__dd-all:hover { color: var(--color-text-white); }
}
@media (prefers-reduced-motion: reduce) {
.navbar__dd-panel,
.navbar__dd.is-open .navbar__dd-panel,
.navbar__dd-chevron svg { transition: none; }
}
/* ============================================================
33. HOMEPAGE TEAM BAND + WAYS SECTION ADDITIONS (2026-10-09)
============================================================ */
/* "A system that runs itself. But you're never on your own." - split out of
the process section into its own light band (section_team). */
.team-band {
position: relative;
padding: var(--space-4xl) 0;
background: #F3F4F7;
}
/* Parker's chat bubble pops up over the platform window, bottom-right like a
real chat widget, so the bar chart on the left stays readable. */
.ways__agent {
position: absolute;
right: 12px;
bottom: 34px;
z-index: 1;
width: 66%;
display: flex;
align-items: flex-start;
gap: 9px;
padding: 9px 11px;
border-radius: 12px 12px 4px 12px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0, 20, 60, 0.35);
}
.ways__agent img {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: #e7eefb;
object-fit: cover;
}
.ways__agent p {
margin: 0;
font-size: 11px;
line-height: 1.45;
color: #3d4660;
}
.ways__agent strong {
display: block;
font-size: 10.5px;
font-weight: var(--font-weight-semibold);
color: #2865BF;
}
/* ============================================================
34. HERO CERTIFIED SEAL + ICEBERG/DAMAGE SPACING (2026-10-09)
============================================================ */
/* Google Trademark Certified Partner medallion, bottom right of the hero
(adp_google_certified_seal() in includes/layout.php). */
.gseal {
position: absolute;
z-index: 3;
right: max(24px, calc((100% - 1240px) / 2));
bottom: 44px;
width: 132px;
height: 132px;
border-radius: 50%;
filter: drop-shadow(0 12px 28px rgba(0, 10, 40, 0.45));
transition: transform var(--transition-smooth);
}
.gseal:hover { transform: rotate(-6deg) scale(1.04); }
.gseal__svg {
display: block;
width: 100%;
height: 100%;
font-family: var(--font-primary);
}
.gseal__ring { letter-spacing: 0.5px; }
@media (max-width: 960px) {
.gseal { width: 96px; height: 96px; right: 16px; bottom: 24px; }
}
/* Iceberg -> damage: with the "how much" line and the radar brand check gone,
the stacked spacings (iceberg margin, both section paddings, the heading's
top margin) left a ~286px hole. */
#damage { padding-top: var(--space-xl); }
#damage .container > .problem__kicker:first-child { margin-top: 0; }
/* ============================================================
35. HERO ROTATING HEADLINE + BRAND-CHECK CARD SPACING (2026-10-09)
Blur fade (.hero__rot--fade, Markus 2026-10-13; slide / flip / typewriter
are gone with the Section Manager). section_hero() (index.php) renders the
aria-hidden .hero__rot-stage inside .hero__rot, the script at the end of
index.php rotates it; .hero__rot-sr keeps "Protect your brand." as the h1's
text. Every line sits in the same grid cell, so the cell is as wide and
tall as the longest line - nothing below moves while it rotates.
Font, size and colour are inherited from .hero__title (no new values).
============================================================ */
/* its own line, so "On autopilot." stays fixed below */
.hero__rot { display: block; }
.hero__rot-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.hero__rot-stage { display: grid; }
.hero__rot-item {
grid-area: 1 / 1;
/* a line that wraps (narrow two-column hero, ~961-1250px) grows upwards,
so the visible line always sits right on top of "On autopilot." */
align-self: end;
}
.hero__rot-item { opacity: 0; }
.hero__rot-item.is-active { opacity: 1; }
.hero__rot-item.is-reset { transition: none !important; }
/* --- B: blur crossfade, 0.9s (= ANIM in index.php). History: 0.7s, 0.55s, then Markus
2026-10-13: slower morph, shorter hold (HOLD 2.6s -> 1.5s) --- */
.hero__rot--fade .hero__rot-item {
filter: blur(14px);
transform: translateY(0.18em);
transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.hero__rot--fade .hero__rot-item.is-active { filter: blur(0); transform: none; }
.hero__rot--fade .hero__rot-item.is-out { transform: translateY(-0.18em); }
@media (prefers-reduced-motion: reduce) {
.hero__rot-item { transition: none !important; animation: none !important; }
}
/* Brand-check card further below "Request a demo" (Markus, 2026-10-09):
48px -> 76px on desktop, 48px -> 64px on phones / small tablets. */
.hero--cta-form .hero__checkcard { margin-top: calc(var(--space-2xl) + 28px); }
@media (max-width: 768px) {
.hero--cta-form .hero__checkcard { margin-top: calc(var(--space-2xl) + 16px); }
}
/* 35b. Rotating headline fit (2026-10-09). "Trademark compliance." needs
exactly the 577px the text column offers at >=1300px, so any font-rendering
difference wrapped it, and from 961-1299px it always wrapped (leaving an
empty line above the shorter phrases). Lines never wrap now, and the
two-column range scales the title so the longest phrase fits with ~4% spare. */
.hero__rot-item { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1299px) {
.hero:has(#variant-parker.hero__variant--active) .hero__title { font-size: calc(3.97vw - 4.4px); }
}
/* "Check my brand" stuck out of the card between 961 and ~1050px: stack the
field and the button there, as on phones. */
@media (min-width: 961px) and (max-width: 1099px) {
.hero__checkcard .hero__check { flex-direction: column; align-items: stretch; }
.hero__checkcard .hero__check-input { flex: none; width: 100%; }
.hero__checkcard .hero__check .btn { width: 100%; }
}
/* ============================================================
36. TEAM AVATAR STACK (2026-10-09)
Homepage #team band: overlapping portrait bubbles + "+N" inside the
"Real people" card, the whole stack links to /about-us/team/.
Markup: adp_team_stack() in includes/team.php. Scheme tokens only.
============================================================ */
.team-stack {
display: inline-flex;
align-items: center;
margin-top: var(--space-md);
padding-left: 10px; /* room for the first bubble's overlap */
text-decoration: none;
vertical-align: top;
}
.team-stack__face,
.team-stack__more {
position: relative;
flex-shrink: 0;
width: 44px;
height: 44px;
margin-left: -10px;
border-radius: var(--radius-full);
overflow: hidden;
background: var(--color-bg-light);
box-shadow: 0 0 0 3px var(--color-bg-white);
transition: margin var(--transition-smooth), transform var(--transition-smooth);
}
.team-stack__face img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-stack__more {
display: flex;
align-items: center;
justify-content: center;
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.2px;
}
/* hover / keyboard focus: the bubbles fan out a little */
.team-stack:hover .team-stack__face,
.team-stack:hover .team-stack__more,
.team-stack:focus-visible .team-stack__face,
.team-stack:focus-visible .team-stack__more { margin-left: -4px; }
.team-stack:hover .team-stack__face:hover { transform: translateY(-3px); }
.team-stack:focus-visible {
outline: 2px solid var(--color-accent-on-light);
outline-offset: 4px;
border-radius: var(--radius-full);
}
@media (max-width: 1024px) {
/* the card stacks and centres its content here (.process__enterprise @1024px) */
.process__enterprise .team-stack { margin-top: var(--space-sm); }
}
@media (max-width: 480px) {
.team-stack__face,
.team-stack__more { width: 38px; height: 38px; margin-left: -9px; }
.team-stack__more { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
.team-stack__face,
.team-stack__more { transition: none; }
}
/* ============================================================
37. FOCUS RING, SITE-WIDE (2026-10-10)
One visible keyboard-focus style for every interactive element that
has no own :focus-visible rule. Scheme tokens only: --color-accent is
the on-light accent on light surfaces and flips to the on-dark one on
every dark surface listed in section 30; the navbar is dark but not in
that list, so it gets the on-dark token explicitly. :where() keeps the
specificity at 0, so component rules (.navbar__dd-*, .team-stack,
form inputs with their own focus style) still win.
============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
:where(.navbar, .footer, .finalcta) :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
outline-color: var(--color-accent-on-dark);
}
/* ============================================================
38. HOMEPAGE #team CARD WITHOUT THE STOCK PHOTO (2026-10-10)
The left photo column is replaced by the real team's avatar bubbles
on a soft panel (.team-card__people), text in the middle, the "Meet
the team" button on the right. <= 1024px the card stacks (section 24
rule on .process__enterprise) and the panel spans the card width.
============================================================ */
.team-band .process__enterprise--team {
padding: var(--space-xl) var(--space-2xl) var(--space-xl) var(--space-xl);
gap: var(--space-2xl);
}
.team-card__people {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-sm);
align-self: stretch;
padding: var(--space-lg) var(--space-xl) var(--space-lg) calc(var(--space-xl) - 10px);
border-radius: var(--radius-lg);
background: var(--color-bg-light);
}
.team-card__people-note {
padding-left: 10px; /* the stack's first-bubble offset, so both centre alike */
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-dark);
opacity: 0.7;
}
/* inside the panel the stack is the visual: no top gap, bigger bubbles */
.team-card__people .team-stack { margin-top: 0; }
.team-card__people .team-stack__face,
.team-card__people .team-stack__more {
width: 52px;
height: 52px;
margin-left: -12px;
}
.team-card__people .team-stack:hover .team-stack__face,
.team-card__people .team-stack:hover .team-stack__more,
.team-card__people .team-stack:focus-visible .team-stack__face,
.team-card__people .team-stack:focus-visible .team-stack__more { margin-left: -5px; }
@media (max-width: 1200px) {
.team-card__people .team-stack__face,
.team-card__people .team-stack__more { width: 46px; height: 46px; margin-left: -11px; }
}
@media (max-width: 1024px) {
.team-band .process__enterprise--team {
padding: var(--space-lg);
gap: var(--space-lg);
}
.team-card__people {
align-self: stretch;
padding: var(--space-lg) var(--space-md) var(--space-lg) calc(var(--space-md) - 10px);
}
.team-card__people .team-stack { margin-top: 0; }
.team-band .process__enterprise--team .btn { margin-top: 0; }
}
@media (max-width: 480px) {
.team-card__people .team-stack__face,
.team-card__people .team-stack__more { width: 38px; height: 38px; margin-left: -9px; }
.team-card__people .team-stack:hover .team-stack__face,
.team-card__people .team-stack:hover .team-stack__more { margin-left: -9px; }
}
@media (max-width: 359px) {
.team-card__people .team-stack__face,
.team-card__people .team-stack__more { width: 34px; height: 34px; margin-left: -9px; }
}
/* Final CTA: phones hide every .section__title
(section 24), which glued
"wait.Neither" together. The markup now has a space before the
, and this
short two-line headline keeps its break on phones too (2026-10-10). */
@media (max-width: 768px) {
.finalcta .section__title br { display: inline; }
}
/* ============================================================
39. PERFORMANCE: METRIC-MATCHED FONT FALLBACK + PAUSED ANIMATIONS (2026-10-10)
============================================================ */
/* Arial resized to Poppins' metrics (values as generated by next/font for Poppins),
so the swap from fallback to the web font no longer moves the hero text and the
brand-check card below it (Lighthouse CLS culprit). */
@font-face {
font-family: 'Poppins Fallback';
src: local('Arial');
ascent-override: 93.62%;
descent-override: 31.21%;
line-gap-override: 8.92%;
size-adjust: 112.16%;
}
/* Hero background layers that are not the active one (opacity 0) kept animating
background-position every frame. */
.hero__bg-layer:not(.hero__bg-layer--active),
.hero__bg-layer:not(.hero__bg-layer--active)::before,
.hero__bg-layer:not(.hero__bg-layer--active)::after { animation: none; }
/* Sections out of view pause every CSS animation inside them; the class is set
by an IntersectionObserver in index.php ("Pause CSS animations ..."). */
[data-section].is-offscreen *,
[data-section].is-offscreen *::before,
[data-section].is-offscreen *::after { animation-play-state: paused !important; }