/* ════════════════════════════════════════════════════════════════════
CLICKFQ BRAND v3 — Design System
Drop-in CSS layer that sits ON TOP of existing clickfq-brand.css.
Adds: editorial type system, refined components, motion primitives.
Compatible: all existing .cfq-* classes continue to work.
Load order:
1. clickfq-brand.css (existing — keep)
2. clickfq-brand-v3.css (this file)
3. Google Fonts (see HEAD snippet below)
═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────── 1. TOKENS — extended palette
Brand colors come from clickfq-brand.css. v3 adds editorial layer. */
:root{
/* editorial surfaces */
--cfq-paper: #FAFAF7; /* warm off-white page bg */
--cfq-ink: #0B0B0E; /* near-black text */
--cfq-line: #ECEAE3; /* hairline divider */
--cfq-line-2: #E2E0D7; /* slightly stronger */
--cfq-muted: #6B6B73; /* secondary text */
/* gradient tints (use sparingly, for hero bg + accent washes) */
--cfq-tint-blue: rgba(3, 137, 255, .10);
--cfq-tint-yellow: rgba(247, 224, 0, .10);
--cfq-tint-green: rgba(42, 169, 82, .08);
/* type stacks */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--font-body: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* radii */
--r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px;
/* shadows — softer, more editorial */
--shadow-sm: 0 1px 2px rgba(11,30,56,.04), 0 1px 2px rgba(11,30,56,.03);
--shadow-md: 0 8px 24px -8px rgba(11,30,56,.10), 0 2px 6px rgba(11,30,56,.04);
--shadow-lg: 0 24px 60px -20px rgba(11,30,56,.18), 0 8px 20px -8px rgba(11,30,56,.08);
--shadow-glow-blue: 0 14px 28px -10px rgba(3,137,255,.55);
}
/* ───────────────────────── 2. BASE
Apply to body to opt the whole page into the new system. */
.cfq-v3-base{
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--cfq-ink);
background: var(--cfq-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.cfq-v3-base ::selection { background: var(--cfq-blue, #0389ff); color: #fff; }
/* ───────────────────────── 3. TYPOGRAPHY UTILITIES */
.cfq-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.02; }
.cfq-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
.cfq-mono { font-family: var(--font-mono); }
.cfq-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cfq-muted); }
/* Display scale — use on h1/h2/h3 inside .cfq-v3-base */
.cfq-h1, .cfq-v3-base h1.cfq-v3 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(40px, 6.2vw, 80px);
line-height: .98; letter-spacing: -0.035em;
margin: 0 0 22px;
}
.cfq-h2, .cfq-v3-base h2.cfq-v3 {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1.02; letter-spacing: -0.030em;
margin: 0 0 18px; text-wrap: balance;
}
.cfq-h3, .cfq-v3-base h3.cfq-v3 {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.15; letter-spacing: -0.020em;
margin: 0 0 12px;
}
.cfq-lede {
font-size: 18.5px; line-height: 1.55; color: var(--cfq-grey-700, #2D3748);
max-width: 560px; text-wrap: pretty;
}
/* Italic accent — wrap a key word inside a heading */
.cfq-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--cfq-blue, #0389ff); letter-spacing: -0.005em; }
.cfq-accent-red { color: var(--cfq-red, #e8242c); }
.cfq-accent-green { color: var(--cfq-green, #2aa952); }
.cfq-accent-yellow { color: #b39e00; }
/* ───────────────────────── 4. BUTTONS (v3) — sit alongside .cfq-btn */
.cfq-btn-v3 {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 46px; padding: 0 20px; border-radius: 12px;
font-family: var(--font-body); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
white-space: nowrap; cursor: pointer; border: none;
transition: transform .12s ease, box-shadow .15s ease, background .15s, border-color .15s, color .15s;
}
.cfq-btn-v3.is-sm { height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
.cfq-btn-v3.is-lg { height: 52px; padding: 0 24px; font-size: 15.5px; border-radius: 14px; }
.cfq-btn-v3.is-block { width: 100%; }
.cfq-btn-v3.is-ink { background: var(--cfq-ink); color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 1px 2px rgba(0,0,0,.18); }
.cfq-btn-v3.is-ink:hover { background: #1a1a1f; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(10,12,30,.4); }
.cfq-btn-v3.is-blue { background: var(--cfq-blue, #0389ff); color: #fff;
box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 14px -6px rgba(3,137,255,.55); }
.cfq-btn-v3.is-blue:hover { background: var(--cfq-blue-600, #006fd4); transform: translateY(-1px); box-shadow: var(--shadow-glow-blue); }
.cfq-btn-v3.is-ghost { background: transparent; color: var(--cfq-grey-700, #2D3748); border: 1px solid var(--cfq-line-2); }
.cfq-btn-v3.is-ghost:hover { background: #fff; border-color: #bcbab0; }
.cfq-btn-v3 .arrow { display: inline-block; transition: transform .2s; }
.cfq-btn-v3:hover .arrow { transform: translateX(3px); }
/* ───────────────────────── 5. FORM CONTROLS (v3) */
.cfq-input-v3 {
width: 100%; height: 46px; padding: 0 14px;
border: 1px solid var(--cfq-line-2); border-radius: 11px;
font: inherit; font-size: 15px; background: #fff; color: var(--cfq-ink);
transition: border-color .15s, box-shadow .15s;
}
.cfq-input-v3:focus {
outline: none; border-color: var(--cfq-blue, #0389ff);
box-shadow: 0 0 0 4px rgba(3,137,255,.12);
}
textarea.cfq-input-v3 { height: auto; padding: 12px 14px; min-height: 80px; resize: vertical; }
.cfq-field-label {
display: block; font-family: var(--font-mono);
font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase;
color: var(--cfq-grey-600, #4A5568); font-weight: 500; margin-bottom: 6px;
}
.cfq-chip {
font-size: 12px; padding: 6px 11px; border-radius: 999px;
background: #f4f3ec; border: 1px solid var(--cfq-line);
color: var(--cfq-grey-700, #2D3748); cursor: pointer;
transition: all .15s;
}
.cfq-chip:hover { background: #fff; border-color: #bcbab0; }
.cfq-chip.is-active { background: var(--cfq-ink); border-color: var(--cfq-ink); color: #fff; }
/* ───────────────────────── 6. CARDS (v3) */
.cfq-card-v3 {
background: #fff;
border: 1px solid var(--cfq-line);
border-radius: var(--r-l);
padding: 28px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.cfq-card-v3.is-hover:hover {
transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dad6c8;
}
.cfq-card-v3.is-dark {
background: var(--cfq-navy-900, #0B1E38); color: #fff; border-color: var(--cfq-navy-900, #0B1E38);
}
/* tinted icon tile — use inside cards (.cfq-icon-tile.x-blue, .x-yellow, etc.) */
.cfq-icon-tile {
width: 46px; height: 46px; border-radius: 12px;
display: grid; place-items: center; flex-shrink: 0;
}
.cfq-icon-tile.x-blue { background: var(--cfq-blue-50, #e8f3ff); color: var(--cfq-blue, #0389ff); }
.cfq-icon-tile.x-yellow { background: var(--cfq-yellow-50, #fffde0); color: #9c8e00; }
.cfq-icon-tile.x-green { background: var(--cfq-green-50, #e8f7ed); color: var(--cfq-green, #2aa952); }
.cfq-icon-tile.x-red { background: var(--cfq-red-50, #fde8e9); color: var(--cfq-red, #e8242c); }
.cfq-icon-tile.x-navy { background: #e5eaf3; color: var(--cfq-navy-900, #0B1E38); }
.cfq-icon-tile.x-purple { background: #f0ebff; color: #7a5cff; }
/* ───────────────────────── 7. SECTION SCAFFOLD */
.cfq-section-v3 { padding: 120px 0; position: relative; }
.cfq-section-v3.is-sm { padding: 88px 0; }
@media (max-width: 720px) { .cfq-section-v3 { padding: 88px 0; } }
.cfq-section-head {
display: grid; grid-template-columns: 1fr auto; gap: 24px;
align-items: end; margin-bottom: 56px;
}
@media (max-width: 780px) { .cfq-section-head { grid-template-columns: 1fr; } }
/* ───────────────────────── 8. STATS / METRICS */
.cfq-stat-num {
font-family: var(--font-display); font-weight: 700;
font-size: 36px; letter-spacing: -0.03em; line-height: 1; color: var(--cfq-ink);
}
.cfq-stat-num .cfq-accent {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
color: var(--cfq-blue, #0389ff);
}
.cfq-stat-lbl { font-size: 13px; color: var(--cfq-muted); letter-spacing: -0.005em; }
/* ───────────────────────── 9. PILL / BADGE (v3) */
.cfq-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 12px 6px 8px; border-radius: 999px;
background: #fff; border: 1px solid var(--cfq-line);
box-shadow: var(--shadow-sm); font-size: 13px;
color: var(--cfq-grey-700, #2D3748);
}
.cfq-pulse {
width: 8px; height: 8px; border-radius: 50%; background: var(--cfq-green, #2aa952);
box-shadow: 0 0 0 0 rgba(42,169,82,.55); animation: cfq-pulse 2s infinite;
}
@keyframes cfq-pulse {
0% { box-shadow: 0 0 0 0 rgba(42,169,82,.55); }
70% { box-shadow: 0 0 0 10px rgba(42,169,82,0); }
100% { box-shadow: 0 0 0 0 rgba(42,169,82,0); }
}
/* ───────────────────────── 10. HERO BG WASH (optional decorative layer) */
.cfq-hero-wash { position: relative; overflow: hidden; }
.cfq-hero-wash::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(55% 50% at 82% 0%, var(--cfq-tint-blue), transparent 65%),
radial-gradient(45% 55% at 0% 30%, var(--cfq-tint-yellow), transparent 70%),
radial-gradient(36% 36% at 100% 100%, var(--cfq-tint-green), transparent 70%);
}
.cfq-hero-wash::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(to right, rgba(11,11,12,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11,11,12,.04) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: radial-gradient(ellipse 85% 60% at 50% 25%, #000 30%, transparent 80%);
}
.cfq-hero-wash > * { position: relative; z-index: 1; }
/* ───────────────────────── 11. NAV (v3) — sticky glass header */
.cfq-nav-v3 {
position: sticky; top: 0; z-index: 60;
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
background: rgba(250,250,247,.78);
border-bottom: 1px solid transparent;
transition: border-color .2s;
}
.cfq-nav-v3.is-scrolled { border-bottom-color: var(--cfq-line); }
/* ───────────────────────── 12. MOTION — scroll reveal primitive
Add class="cfq-reveal" to any element. Add .in via IntersectionObserver. */
.cfq-reveal {
opacity: 0; transform: translateY(18px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.cfq-reveal.in { opacity: 1; transform: translateY(0); }
/* ───────────────────────── 13. WRAPPER UTIL */
.cfq-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .cfq-wrap { padding: 0 22px; } }
/* ════════════════════════════════════════════════════════════════════
END clickfq-brand-v3.css
Companion JS (drop into a global script, runs on DOMContentLoaded):
// sticky nav border
const nav = document.querySelector('.cfq-nav-v3');
if (nav) window.addEventListener('scroll',
() => nav.classList.toggle('is-scrolled', window.scrollY > 8));
// scroll reveal
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) {
e.target.classList.add('in'); io.unobserve(e.target);
}});
}, { threshold: 0.08 });
document.querySelectorAll('.cfq-reveal').forEach(el => io.observe(el));
// chip groups
document.querySelectorAll('[data-chip-group]').forEach(group => {
group.addEventListener('click', e => {
const chip = e.target.closest('.cfq-chip');
if (!chip) return;
group.querySelectorAll('.cfq-chip').forEach(c => c.classList.remove('is-active'));
chip.classList.add('is-active');
});
});
═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
v3 — EXTENDED COMPONENT LAYER (added after homepage retrofit)
Patterns extracted from the homepage so every page can reuse them.
═══════════════════════════════════════════════════════════════════════ */
/* ────────────────────────── 14. TOP STACK (fixed announce + nav) */
:root { --cfq-top-h: 104px; }
@media (max-width: 640px) { :root { --cfq-top-h: 124px; } }
.cfq-top-stack { isolation: isolate; }
/* ────────────────────────── 15. ANNOUNCEMENT BAR (.cfq-announce) */
.cfq-announce {
display: block; text-decoration: none;
background: linear-gradient(90deg, #0B1E38 0%, #0d2547 50%, #0B1E38 100%);
border-bottom: 1px solid rgba(255,255,255,.08);
position: relative; overflow: hidden;
}
.cfq-announce:hover .cfq-announce-link { border-bottom-color: #f7e000; }
.cfq-announce-link {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 700; font-size: 13px;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px;
transition: border-color .15s ease;
}
@media (max-width: 640px) {
.cfq-announce .cfq-italic { display: block; }
}
/* ────────────────────────── 16. STRIPE CARD (.cfq-card-stripe)
Paper card with a 3px brand-color top stripe.
Set the stripe color via inline style="--stripe:var(--cfq-blue)"
or by adding a brand modifier class .x-blue / .x-green / etc. */
.cfq-card-stripe {
background: #fff;
border: 1px solid var(--cfq-line);
border-radius: var(--r-l);
overflow: hidden;
position: relative;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
display: flex; flex-direction: column;
}
.cfq-card-stripe::before {
content: ""; display: block; height: 3px;
background: var(--stripe, var(--cfq-blue, #0389ff));
transition: height .15s ease;
}
.cfq-card-stripe.is-hover:hover {
transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #dad6c8;
}
.cfq-card-stripe.is-hover:hover::before { height: 5px; }
a.cfq-card-stripe, a.cfq-card-tint { text-decoration: none; color: inherit; }
a.cfq-card-stripe:focus-visible, a.cfq-card-tint:focus-visible {
outline: 2px solid var(--cfq-blue, #0389ff); outline-offset: 2px;
}
.cfq-card-stripe > .cfq-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.cfq-card-stripe.is-sm > .cfq-card-body { padding: 20px; }
/* Stripe color modifiers — set both the stripe and the icon foreground */
.cfq-card-stripe.x-blue { --stripe: var(--cfq-blue, #0389ff); }
.cfq-card-stripe.x-green { --stripe: var(--cfq-green, #2aa952); }
.cfq-card-stripe.x-yellow { --stripe: #f7e000; }
.cfq-card-stripe.x-red { --stripe: var(--cfq-red, #e8242c); }
.cfq-card-stripe.x-navy { --stripe: var(--cfq-navy-900,#0B1E38); }
.cfq-card-stripe.x-purple { --stripe: #7a5cff; }
/* Small inline icon used inside a stripe card next to the badge.
Pairs with the card's stripe color — apply same x-* class on the icon
wrapper, or it inherits from the card via 'color: var(--stripe)'. */
.cfq-card-stripe .cfq-card-ico {
display: inline-flex; color: var(--stripe);
width: 22px; height: 22px;
}
.cfq-card-stripe .cfq-card-link {
margin-top: auto;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-display); font-weight: 700; font-size: 13px;
color: var(--stripe);
}
/* ────────────────────────── 17. TINT CARD (.cfq-card-tint)
Soft tinted-bg card — used for case-study tiles. */
.cfq-card-tint {
border: 1px solid var(--cfq-line);
border-radius: var(--r-l); padding: 24px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.cfq-card-tint.is-hover:hover {
transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.cfq-card-tint.x-yellow { background: linear-gradient(135deg, #fffbe5 0%, #fff7d0 100%); border-color: #f0e8b8; }
.cfq-card-tint.x-blue { background: linear-gradient(135deg, #edf6ff 0%, #dfeeff 100%); border-color: #cfe2f7; }
.cfq-card-tint.x-green { background: linear-gradient(135deg, #effaf3 0%, #e0f3e8 100%); border-color: #c8e6d3; }
.cfq-card-tint.x-red { background: linear-gradient(135deg, #fff0f1 0%, #ffe3e5 100%); border-color: #f5cdd0; }
.cfq-card-tint.x-purple { background: linear-gradient(135deg, #f5f1ff 0%, #ebe2ff 100%); border-color: #d9cffc; }
/* ────────────────────────── 18. STEP NUMERALS (.cfq-step-num)
Big mono "01" "02" with italic-serif leading zero in brand color. */
.cfq-step-num {
font-family: var(--font-display); font-weight: 700;
font-size: 54px; line-height: 1; letter-spacing: -0.04em;
color: var(--cfq-ink); margin-bottom: 18px;
}
.cfq-step-num > .cfq-step-zero {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
color: var(--cfq-blue, #0389ff);
}
.cfq-step-num.x-blue > .cfq-step-zero { color: var(--cfq-blue, #0389ff); }
.cfq-step-num.x-green > .cfq-step-zero { color: var(--cfq-green, #2aa952); }
.cfq-step-num.x-yellow > .cfq-step-zero { color: #b39e00; }
.cfq-step-num.x-red > .cfq-step-zero { color: var(--cfq-red, #e8242c); }
.cfq-step-num.x-purple > .cfq-step-zero { color: #7a5cff; }
.cfq-step-num.x-navy > .cfq-step-zero { color: var(--cfq-navy-900,#0B1E38); }
/* ────────────────────────── 19. MODAL (.cfq-modal)
Consistent modal pattern. Hidden by default — toggle .is-open. */
.cfq-modal {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 16px;
background: rgba(11, 30, 56, .55);
backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
}
.cfq-modal.is-open { opacity: 1; pointer-events: auto; }
.cfq-modal-panel {
background: #fff;
border-radius: var(--r-l);
width: 100%; max-width: 580px;
max-height: 90vh; overflow-y: auto;
box-shadow: var(--shadow-lg);
transform: translateY(12px) scale(.98);
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.cfq-modal.is-open .cfq-modal-panel { transform: translateY(0) scale(1); }
.cfq-modal-head {
position: sticky; top: 0; z-index: 1;
background: linear-gradient(135deg, var(--cfq-blue, #0389ff) 0%, #0270d4 100%);
color: #fff;
padding: 18px 24px;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l);
position: sticky; overflow: hidden;
}
.cfq-modal-head::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 88% 30%, rgba(255,255,255,.18) 0%, transparent 55%),
radial-gradient(circle at 10% 110%, rgba(247,224,0,.14) 0%, transparent 55%);
pointer-events: none;
}
.cfq-modal-head > * { position: relative; z-index: 1; }
.cfq-modal-title {
font-family: var(--font-display); font-weight: 700; font-size: 18px;
letter-spacing: -.015em; color: #fff; margin: 0;
}
.cfq-modal-sub { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 2px; }
.cfq-modal-close {
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
color: #fff;
display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
transition: background .15s, transform .12s;
}
.cfq-modal-close:hover { background: rgba(255,255,255,.28); }
.cfq-modal-close:active { transform: scale(.94); }
.cfq-modal-body { padding: 24px; }
.cfq-modal-body > * + * { margin-top: 14px; }
/* ════════════════════════════════════════════════════════════════════
v3 — FULL MOTION LANGUAGE
Page-level motion vocabulary: load-stagger, counters, marquee,
parallax washes, animated dividers. JS hooks below.
═══════════════════════════════════════════════════════════════════════ */
/* ────────────────────────── 20. LOAD STAGGER (.cfq-fade-up)
Stagger across siblings via --i index variable. */
.cfq-fade-up {
opacity: 0; transform: translateY(14px);
animation: cfq-fade-up .7s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
@keyframes cfq-fade-up {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cfq-fade-up { animation: none; opacity: 1; transform: none; }
}
/* ────────────────────────── 21. NUMBER COUNTER (.cfq-counter)
Element with data-count="120" — JS animates the numeral up. */
.cfq-counter { font-variant-numeric: tabular-nums; }
/* ────────────────────────── 22. MARQUEE STRIP (.cfq-marquee)
Continuous horizontal logo / pill strip. Pause on hover. */
.cfq-marquee {
position: relative; overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cfq-marquee-track {
display: inline-flex; gap: 56px; padding-right: 56px;
animation: cfq-marquee-x 35s linear infinite;
will-change: transform;
}
.cfq-marquee:hover .cfq-marquee-track { animation-play-state: paused; }
@keyframes cfq-marquee-x {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.cfq-marquee-track { animation: none; }
}
/* ────────────────────────── 23. PARALLAX BLOB (.cfq-parallax-blob)
Hero wash blobs that drift gently on scroll. Driven by JS adding
transform: translateY(). */
.cfq-parallax-blob {
will-change: transform;
transition: transform .12s linear;
}
/* ────────────────────────── 24. ANIMATED SECTION DIVIDER */
.cfq-divider {
height: 1px; width: 100%; background: var(--cfq-line);
position: relative; overflow: hidden; margin: 0;
}
.cfq-divider::before {
content: ""; position: absolute; top: 0; left: -20%;
width: 20%; height: 100%;
background: linear-gradient(90deg, transparent 0,
var(--cfq-blue, #0389ff) 50%, transparent 100%);
animation: cfq-divider-sweep 6s linear infinite;
}
@keyframes cfq-divider-sweep {
to { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
.cfq-divider::before { animation: none; }
}
/* ────────────────────────── 25. LINK UNDERLINE (.cfq-link)
Animated underline reveal on hover. */
.cfq-link {
position: relative; color: inherit; text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0 1.5px; background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .25s cubic-bezier(.2,.7,.2,1);
}
.cfq-link:hover { background-size: 100% 1.5px; }
/* ────────────────────────── 26. STAT WITH AUTO-ACCENT (.cfq-stat-v2)
120+
The child gets italic-serif accent automatically. */
.cfq-stat-v2 {
font-family: var(--font-display); font-weight: 700;
font-size: 32px; letter-spacing: -.03em; line-height: 1;
color: var(--cfq-ink);
}
.cfq-stat-v2 > i {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
color: var(--cfq-blue, #0389ff);
}
.cfq-stat-v2.x-green > i { color: var(--cfq-green, #2aa952); }
.cfq-stat-v2.x-red > i { color: var(--cfq-red, #e8242c); }
/* ════════════════════════════════════════════════════════════════════
END EXTENDED COMPONENT LAYER
COMPANION JS — add once globally (DOMContentLoaded):
// measure top stack and set --cfq-top-h
const top = document.querySelector('.cfq-top-stack');
if (top) {
const set = () => document.documentElement.style.setProperty(
'--cfq-top-h', top.offsetHeight + 'px');
set(); window.addEventListener('resize', set);
}
// open / close modal — any [data-modal-open="ID"] opens #ID,
// [data-modal-close] inside closes it.
document.addEventListener('click', e => {
const opener = e.target.closest('[data-modal-open]');
if (opener) { const m = document.getElementById(opener.dataset.modalOpen);
if (m) m.classList.add('is-open'); }
const closer = e.target.closest('[data-modal-close]');
if (closer) { closer.closest('.cfq-modal')?.classList.remove('is-open'); }
const back = e.target.classList.contains('cfq-modal') ? e.target : null;
if (back) back.classList.remove('is-open');
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape') document.querySelectorAll('.cfq-modal.is-open')
.forEach(m => m.classList.remove('is-open'));
});
// marquee duplicate — each .cfq-marquee-track gets its children
// cloned once for seamless loop.
document.querySelectorAll('.cfq-marquee-track').forEach(track => {
track.innerHTML += track.innerHTML;
});
// parallax blobs — translate based on scrollY × data-speed
const blobs = document.querySelectorAll('.cfq-parallax-blob');
if (blobs.length) window.addEventListener('scroll', () => {
const y = window.scrollY;
blobs.forEach(b => {
const s = parseFloat(b.dataset.speed || .15);
b.style.transform = `translateY(${y * s}px)`;
});
}, { passive: true });
// counter — animate from 0 to data-count when intersecting
const cio = new IntersectionObserver(es => es.forEach(e => {
if (!e.isIntersecting) return;
const el = e.target;
const target = parseInt(el.dataset.count || el.textContent, 10) || 0;
const dur = 900; const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / dur);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased) + (el.dataset.suffix || '');
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick); cio.unobserve(el);
}), { threshold: .4 });
document.querySelectorAll('.cfq-counter').forEach(c => cio.observe(c));
═══════════════════════════════════════════════════════════════════════ */