/* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.16 (16 May 2026) Changes from v1.15 (16 May 2026): - ISO 27001 REMOVED throughout. CIQ holds three certifications only: SOC 2, GDPR, Cyber Essentials. All ISO references in version history, Module P showcase, footer notes, and copy have been struck. Do not reference ISO on any page. - GLOBAL ASSET REGISTRY added in Page Architecture section. Single reference block for every managed asset path: /assets/logos/ — CIQ brand marks (nav, footer) /assets/customers/ — customer logos (17 confirmed) /assets/partners/ — data partner logos (Lightcast, Mercer) /assets/badges/ — compliance + G2 badges (5 confirmed) /assets/product/ — product UI screenshots (4 confirmed) Claude Code must reference these paths — never hard-code a filename or path without checking the registry first. - MODULE P updated: 3 badges only (SOC 2, GDPR, Cyber Essentials). Each badge now shows its correct /assets/badges/ path and the background/variant rule (which file to use on light vs dark). - MODULE O.5 updated: product images assigned to each CTA variant. V1 → salary-benchmarking-reports.png (dashboard overview) V2 → search-salary-benchmarks-results.svg (role search results) V3 → average-salary-cost.png (bar chart, actual vs benchmark) team-benchmarks-light.svg reserved for Module Y feature sections. /* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.15 (16 May 2026) Changes from v1.14 (16 May 2026): - ARTICLE CONTENT WIDTH CLARIFIED. Blog and case study article main column was always full-width (1fr of --max-width minus sidebar and gap). The page architecture table and article H1 section now make this explicit: main column fills all available space to the right of the sidebar. No inner max-width constraint on the article body. CTAs, FAQs and other modules reused inside articles span the full main-column width. - GLOBAL CTA LINKS added as a locked reference block in the Page Architecture section. All booking and form URLs for Salary Benchmarking (and placeholder entries for EU Pay Transparency and Job Architecture) defined in one place. Claude Code must reference these — never hard-code a URL elsewhere without checking here first. - MODULE O.5 — GLOBAL ARTICLE CTA added. A full-width CTA module for use inside blog articles and case studies, spanning the complete main column (no sidebar constraint). Dark rounded card (same visual treatment as Module N) with product-specific copy variants. Replaces ad-hoc CTA blocks previously added per-article. Three copy variants documented for Salary Benchmarking: V1 — Book a demo (primary conversion) V2 — See your data (curiosity / ROI angle) V3 — We've got the data (breadth / coverage angle) EU Pay Transparency and Job Architecture copy variants reserved for when those product pages launch. /* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.14 (16 May 2026) Changes from v1.13 (16 May 2026): - NEW: INLINE ICON SET — paragraph-height icons for use inside FAQ answers and body copy (replacing emoji ✅ ❌ formatting from old site content). Three families: .ic-tick-* Tick / check mark (4 light-bg variants, 2 dark-bg variants) .ic-cross-* Cross / X mark (same 6 variants) .ic-num Inline number badge (5 light-bg variants, 3 dark-bg variants) All icons: 18px circle diameter, 10–11px inner glyph — sits flush with 15px paragraph text (FAQ answer line-height 1.65). Inline SVG only — no image files, no base64, no emoji. CSS-stylable via currentColor where applicable. Rule: FAQs NEVER use a dark background — light-bg icon variants are the only FAQ use case. Dark-bg variants are provided for paragraph copy that appears on dark sections (Module N, dark hero bands, etc). See showcase section: "Inline Icon Set — Paragraph-Height Icons". /* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.13 (16 May 2026) Changes from v1.12 (9 May 2026): - MODULE L (Filter Chip Strip) - GLOBAL MODULE blog chip set rationalised. Agreed final set of 6 chips reflects the three distinct product areas (Salary Benchmarking, EU Pay Transparency, Job Architecture) plus editorial and customer content: All posts | Industry Insights | Salary Benchmarking | EU Pay Transparency | Compensation Management | Customer Stories Retired chips: Spotlight (vague, no product mapping), Pay Reviews (sub-topic, sits under Compensation Management). "Case Studies" renamed to "Customer Stories" - warmer, consistent with how index pages reference this content type. Module L is a GLOBAL MODULE for blog index filtering. The chip set defined here is the single source of truth - apply identically on the blog index page and any page embedding a blog filter strip. Change the set here first; then update every page that uses it. Changes from v1.11 (9 May 2026): - GLOBAL MODULES governance introduced. Two modules are now formally locked as "global modules" - Module A (Top Nav) and Module Q (Footer). These are defined ONCE here and applied identically to every page. No per-page variations. Change once, update everywhere. - Module Q (Footer) - rebuilt. New 2fr/1fr/1fr/1fr grid with left contact block (logo + correspondence address + LinkedIn + Contact us) and 3 named link columns (Platform / Insights Hub / Company). Bottom row: full legal block left (copyright + Co. registration + registered office + VAT) and Terms + Privacy Policy right. Tagline removed. Real content throughout (no Lorem ipsum). - Module K (Icon System) - formalised currentColor rule. All Module K family icons now use stroke="currentColor" or fill="currentColor" so they inherit parent text colour. Light-bg parents (.cs-meta-pill) keep pink stroke. Dark-bg parents (.footer-contact-row) inherit white-on-dark. New family members documented: envelope, LinkedIn. - Module A (Top Nav) - tagged as global module. Build itself unchanged in this release; will be rebuilt in a future version. Changes from v1.10 (4 May 2026 - same-day iteration): - FIXED design system banner subtitle. Previously read "Tokens, components, and reusable layout modules for Framer" - corrected to "for Claude Code". The site is built and deployed via Claude Code, not Framer; the banner copy was outdated from earlier drafts of the design system. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.10 (4 May 2026) Changes from v1.9 (4 May 2026 - same-day iteration): - FIXED Icon-box --paired modifier showcase background. Previously rendered on oatmeal panels - corrected to white panels (the entire premise of --paired is a white-bg context paired with a dark-bg column on the same row). Oatmeal was misleading. - REMOVED .icon-box-pink-white--paired variant. V4 standalone .icon-box-pink-white on white bg already provides contrast against any paired column - the pink fill carries itself. A pink border on a pink-fill box would only register as a subtle outline at best, and adds noise. Two --paired variants remain: --white-pink (1px pink border) and --white-dark (1px grey border). - FIXED step-number --black variant misinterpretation. Earlier version added .step-number--black as a third colour variant, which duplicated --dark (both render as black-ish filled circles). The actual requirement was an ICON-content variant of the existing colour scheme, not a third colour. Replaced with .step-number--icon content modifier that pairs freely with --dark or --pink: same circle styling, but the inner content swaps from digit to SVG icon (~18x18). Mirrors the .callout-list-badge--num / --icon pattern in Module T. - ADDED dividers sizing rule note. Both horizontal and vertical divider showcases now carry a clarifying note that the "full" / "short" labels are guidance, not locked dimensions: dividers stretch to the width/height of their container. Short variants default to ~120px (horizontal) or ~80px (vertical) and can be tuned per context with an inline override when sitting under a smaller element. - FIXED Module B.2 Index Hero IQ orphan. Hero H1 "Why HR teams 🩷 Compensation IQ" was wrapping at typical desktop widths with "IQ" left alone on a second line. Applied the same fix as the customers page hero (v1.7 of the customers page): non-breaking space in "Compensation IQ" plus scoped text-wrap:balance on the H1. Brand-name protection rule (added to the master style header in v1.8) applies wherever "Compensation IQ" appears inside an H1, H2, or display heading. - ADDED Module T .callout-list--dark icon variant. The dark variant previously showcased only the numbered badge. Added a second showcase row demonstrating .callout-list--dark paired with .callout-list-badge--icon (same dark badge styling, content swap from digit to SVG icon) - matching the icon variant available on the default pink callout-list. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ COMPENSATION IQ - FRAMER WEBSITE MASTER STYLE v1.9 (4 May 2026) Customer-facing example copy in module bodies replaced with Lorem ipsum / Person Name / Company Name / Role Title / Industry tokens (so designers don't accidentally reuse a real customer testimonial out of context). Customer logos in module examples replaced with a "Company Logo" placeholder block. Compliance badges (SOC 2, GDPR, Cyber Essentials) preserved - these are real brand-neutral certifications. SEO/GEO content, prompt examples, schema strings, module names, V-labels, code labels and all explanatory body copy preserved. Changes from v1.8 (4 May 2026): - NEW ICON-BOX BORDER VARIANTS for paired-column modules. The rule: when an icon-box variant (V2 .icon-box-white-pink, V3 .icon-box-white-dark) sits on a WHITE background in a column whose paired column has the SAME icon-box variant on a DARK background, the white-bg version gets a thin border that matches the outer shape of the dark-bg version (so visual rhythm holds across the columns). The border colour matches the icon-box pairing: .icon-box-white-pink--paired → 1px solid pink border .icon-box-white-dark--paired → 1px solid grey border V4 .icon-box-pink-white does NOT need a --paired variant - on a white bg the pink fill already provides contrast against any paired column. If there is no paired dark column with a matching icon-box, do NOT use the --paired modifier; the icon-box stands alone. If using .icon-clean (V1, no square fill) on either side, no border applies on either side - clean is clean both columns. Reference: pricing page v1.3 inclusions section ("What's IN the box") - rocket icon on dark left + package icon on white right with --paired modifier so the white box has a soft grey border matching the dark box's outer shape. - NEW V5 TICK VARIANT: .check-circle-dark Dark filled circle + white check, for use on LIGHT backgrounds where pink is reserved for accents. Inverse of V2 .check-circle-pink. Used on the pricing page right column ("Don't pay for the basics") to match the V4 .check-circle-white ticks on the dark left column. - NEW STEP NUMBER MODIFIER: .step-number--icon Content modifier (not a colour variant). Drops the digit typography and sizes an inner SVG icon to ~18x18 for a clean icon render. Pair with the existing colour variants (--dark or --pink) so the icon badge inherits the same circular styling and colour scheme as numbered steps - useful when a step list mixes numbered ordinal items with icon callouts, or when steps are non-ordinal and an icon reads better than a number. Mirrors the .callout-list-badge--num / --icon pattern already in Module T. - NEW MODULE T VARIANT: .callout-list--dark Dark-on-light variant of Module T callout list. The numbered or icon badge uses dark fill instead of pink, for use in contexts where pink is reserved for accents elsewhere on the same page. - NEW Module K variant: .cs-meta strip with three icon-pill row (Industry / Headcount / Location) for case-study and pricing-page meta strips. Industry icon = small office building (NEW), replacing the previous flame in the Industry slot. Headcount = existing pink people icon. Location = existing pink map-pin. - NEW COMPONENT: .product-card (two-up large product card with embedded price block + .cs-meta-pill on price row). Used on the pricing page to show two products side-by-side with stat strip, feature ul, embedded price block (price LEFT + .cs-meta-pill RIGHT, vertically centred), EUR softline, and 1 or 2 CTAs at the bottom. - NEW COMPONENT: .data-source-card (4-up tertiary cards with logo+chip header row). Used on the pricing page to show Lightcast / self-reported / real-time customer / Mercer data sources. Logo on left + .article-tag-chip on right of a header flex row, then h4 + body p, then footer line above border at the bottom. - NEW COMPONENT: .modal (reusable iframe shell, lazy-loaded, 1040x920px, Esc / x / backdrop close). Used for "Book a demo" Calendly embed and "Get a quote" form embed on the pricing page. - NEW MODULE S.6b (customer quotes variant): 3-up white quote cards with company logo at top of each card, named role at bottom, NO star rating. Distinct from the existing S.6 G2 reviews variant (which has star ratings, no logo). - NEW MODULE S.7: S.6b customer-quotes pattern placed inside a Module O.4 full-bleed dark band with pink+purple radial glows. White cards on dark band. Used on the pricing page. - F.1 / F.2 / F.3 / F.4 RESTORATION: F-series feature cards now document the secondary-copy variant (h3 title + body paragraph beneath) that was dropped between v1.7 and v1.8. This is the pattern used on the pricing page differentiation section. Previous v1.8 cards only documented the icon + title pattern. - MODULE C COMPLIANCE: G2 logo REMOVED from compliance trust strip examples. G2 is a third-party REVIEW site, not a compliance certification. Module P now correctly shows SOC 2 + GDPR + Cyber Essentials only. ISO 27001 is NOT a CIQ certification — do not reference it. - LOREM IPSUM SWEEP on module-example body copy: customer names, role titles, company names, customer testimonials, blog post titles, case study headlines, and similar customer-facing example copy replaced with neutral placeholder tokens (Person Name / Role Title / Company Name / Industry / Lorem ipsum). Customer logos in modules swapped for a "Company Logo" placeholder block. The reason: a designer browsing the design guide should not be tempted to copy-paste real customer testimonials into a deployed module - they may be out of date or out of context. Compliance badges (SOC 2, GDPR, Cyber Essentials) preserved as they are brand-neutral certifications. SEO/GEO content, schema strings, prompt examples, module/code labels, and design system explanatory copy ALL preserved. Changes from v1.7.2 (3 May 2026 - same-day iteration): - NEW TYPOGRAPHY RULE: Brand-name protection in headings. Wherever "Compensation IQ" (or any other multi-word brand name) appears inside an H1, H2, or display heading, the words MUST be joined with a non-breaking space: `Compensation IQ`. This prevents the brand name from breaking across two lines (e.g. the "IQ" orphan that occurred on the customers page hero at certain desktop widths where the container left just enough room for "Compensation" but not the full token). - NEW HERO RULE: Hero H1s on marketing/index pages should apply `text-wrap: balance` SCOPED to the hero selector (e.g. `.cs-hero h1 { text-wrap: balance; }`), NOT applied globally to `.display-h1`. This evenly distributes lines when wrapping is unavoidable on narrower viewports while leaving article and case study headings (`.display-h1--article`) untouched. Apply per-page via a hero-scoped selector; do not promote to the global rule. - Existing `.display-h1` clamp(40px, 5vw, 64px) and `.display-h1--article` clamp(28px, 3.4vw, 38px) rules UNCHANGED. Changes from v1.7.1 (3 May 2026 - same-day iteration): - Added new MODULE CATEGORY sub-banner: "Full Width". Modules placed in this category render EDGE-TO-EDGE at full viewport width, NOT constrained by the standard --max-width 1280px container. Designers picking a module from this category know up-front that the module spans the full screen. The Full Width sub-banner sits BELOW the existing CTA Banners section, ABOVE Trust & Compliance. - Module O.4 (CTA Banner / Full-Bleed Dark Band) MOVED into the new Full Width category. The demo in the design guide is rendered without the standard inner .container wrapper so it appears edge-to-edge on the design guide page itself - showing designers exactly how it deploys on a real page rather than trapped inside a constrained module-frame. - CTA Banners sub-banner intro rolled back to mention only N / O.1 / O.2 / O.3 since O.4 now lives in Full Width. Changes from v1.7 (3 May 2026 - same-day iteration): - FIXED Module D.1 .cs-hero-stats variants. Previously rendered with gap:48px and no internal dividers, so 2-up / 3-up cells looked like floating numbers with no visual structure. Now uses gap:0 plus border-right + matched padding on each cell - gives a clean vertical divider between adjacent stats. Spec lifted from the case study deployment (v1.4): padding 0 32px per cell, divider rgba(255,255,255,.12), :first-child loses left padding and :last-child loses right border + padding so the strip sits flush within the container. The 1-up variant has only one cell so no divider applies (override resets padding to 0). On mobile (<760px) all variants stack to single column with horizontal border-bottom dividers between rows instead. - Added MODULE O.4 - CTA Banner / Full-Bleed Dark Band. New CTA family member - the first FULL-BLEED edge-to-edge dark band (existing N, O.1, O.2, O.3 are all inset rounded cards). Visual treatment: dark background spanning the full viewport width, pink radial glow top-LEFT (large, 480px, 30% opacity), secondary purple-pink glow bottom-RIGHT (380px, 20% opacity). Centred content column at 760px max-width with H2 + lede + two CTAs (primary .btn-chip-on-dark + secondary ghost-on-dark). PLACEMENT RULE: do NOT place directly above Module Q footer (which is also dark) - the dark-on-dark stack with no breathing room reads as one heavy block. Use Module O.4 as a section break BETWEEN two light-background modules earlier in the page, or use the existing inset-rounded-card CTAs (N / O.1 / O.2 / O.3) as the pre-footer closer where white space between the CTA and the dark footer is needed. Changes from v1.6 (3 May 2026): Additions are PURELY ADDITIVE - all existing modules (CTA banners N/O.1/O.2/O.3, showcase H.1-H.4, hero B/B.2 etc) stay UNCHANGED in their existing in-page rendered preview frames. Only S.1 and S.2 are edited (G2 strip reorder + drop "reviews" copy per stakeholder direction). All other v1.7 work is new modules + new variants appended in the new-additions section at the end. - Module S.1 + S.2 EDITED. G2 strip reordered: G2 round red logo FIRST, then yellow stars, then "4.8/5" rating. Dropped the "240+ reviews from" copy line. The mark of the source carries more weight than the volume of reviews; cleaner read. - Added MODULE H.5 - Case Study Hero (Full-bleed dark, pink glow top-right). H1 + 20px lede + integrated 3-up stats strip (uses .cs-hero-stats variants). Used at the top of customer case study pages. No breadcrumb, no overline, no logo, no hero image below - the hero IS the surface. Pairs with the .display-h1 article-scale font (clamp 28-38px) so the title feels integrated with the long-form reading context that follows. - Added MODULE T - Callout List. Generic stacked-list component for use INSIDE long-form blog articles and case study prose. Each row: circular pink badge on the left (numbered .--num variant or icon .--icon variant) + H4 + body copy on the right. Vertical stack, generous spacing, no card backgrounds. Reads as part of the prose, not a separate card module. Includes .clt strong-copy fallback if H4 is already taken in the article hierarchy. No section label, no module H2 - long-form rule applies. - Added MODULE U - NPS Card. Dark card with pink glow bottom-right, designed to spotlight a single customer rating. Big two-tone number on the left (.nps-card-num with .nine span pink first digit, white denominator) + label + supporting paragraph on the right. Same font weight (700) and letter-spacing (-0.02em) as the hero stats so visual register is consistent across the page. Reusable for any "X / 10" rating moment. - Added .cs-hero-stats VARIANTS to existing Module D.1: --1up, --2up, --3up. Some customers will have only 1 stat (Mando, Anon FinTech, Instant Impact), some 2, some 3 (About:Energy, Zoomo). Same component, just different grid templates. Variant demo shown alongside D.1 in the new-additions section. - Added .testimonial-card--pop NEW VARIANT to existing Module J.1. Master J.1 standard remains as-is (1px outer border, 4px offblack left border, --radius rounded corners, pink quote-mark glyph via ::before, 32px 36px padding). The --pop variant adds box-shadow: var(--shadow-md) for visual lift in long-form reading contexts. Use J.1 standard outside articles (homepage, product pages); use --pop inside blog articles and case studies where individual quotes need to break visually from the prose. - Added Module K AUTHOR-STRIP CENTRED COMPOSITION variant. The existing meta strip (tag chips + date + share) stays unchanged. The new addition is the author / customer info row that sits directly below the meta strip on customer case studies: .cs-author-strip (justify-content:center) wrapping .cs-author-inner (flex centre, gap 32px) containing the author cluster + .cs-author-divider (1px wide, 40px tall, --border; INSET so it does not touch the strip's bracket lines) + the customer logo. On mobile (<700px) the inner wrapper switches to flex-direction:column, divider hides, both halves stack centred. - Added Module K CASE-STUDY LAYOUT CONVENTION. Reusable strip pattern for case studies: LEFT side = "Case Studies" tag chip + customer profile pills (Industry / Headcount / Location, in that order to match the customers index filters; pink icons). RIGHT side = .cs-meta-pill--date variant (smaller font, neutral icon stroke - reads as metadata not category) + share row (LinkedIn + copy link). - Added LONG-FORM MODULE RULE to the rules block. When any module from the master design guide is reused inside a blog article or customer case study, it DROPS its overline + module-level H2. The article body's own H2 / H3 hierarchy does that work. Keeps heading structure clean for SEO and accessibility, and avoids "module title competing with article title" awkwardness. Applies to: J.1, J.2, F.x, G, T, D.1 (when restated as in-article impact recap), and any other inline component reused inside long-form prose. - Added URL CONVENTION to the rules block. Customer case studies publish under /blog/ (same path as blog articles), using "Case Studies" as the blog category chip. Customers index page cards link directly to the /blog/... URLs. Single content hub for SEO concentration; reuses the with-TOC blog article template structure. Changes from v1.5 (2 May 2026 - second pass today): - G2 brand logo standardised across all S.x modules. Previously: S.1, S.2 used a base64 PNG of the G2 mark; S.3-S.6 used a custom red chip with the letters "G2" (not the official brand mark). All replaced with the official round red SVG sourced from G2_Brand_Logo_Colour.svg. J.3 (added in v1.5) already used the correct mark. - Module H.4 moved to sit next to H.3 in the document body. H.4 is a showcase variant (pink glow flipped left so the right column is clean for embedded cards), not a separate category. It belongs with the other showcase patterns. - Module library section reorganised with sub-banners grouping modules by purpose (Heroes, Customer Logo Strips, G2 Social Proof, Showcase Patterns, etc). 18 sub-banners added. Module letter codes UNCHANGED - this is purely visual scaffolding so readers can see the mental model when scrolling. - Sub-banners use a pink fill by default; "Page Category: Blog" and "Page Category: Customer" use the dark-fill variant (.sg-subbanner--page-category) so page-specific buckets read as distinct from the general module groups. - S.1 and S.2 reclassified inline as ELEMENTS (drop into any module) rather than full standalone sections. Pink ELEMENT prefix added to their description copy. S.3-S.6 remain full section-width modules. Changes from v1.4 (2 May 2026 - first pass today): - Module L .filter-chip.is-active state corrected to OFFBLACK-FILL white text (was pink-fill). Active pill should read as the selected state in the same dark visual register as the section's structural elements; pink fill is reserved for primary CTAs and brand accents, not filter selection state. Hover variant updated to match. - Added MODULE B.2 - Index Hero (Compact, Centred). Overline + H1 only, no subline, no CTA. Smaller hero designed to hand off immediately to the section below. Used on customer index, blog index. - Added MODULE H.4 - Featured Story (Dark, Pink Glow Left). Variant of H.3 with the glow flipped to the left so the right column is clean for embedded card components (case study cards, blog cards). H2 + CTA on left; embedded card on right with --shadow-lg lift. - Added MODULE J.3 - Quote Wall Masonry (Mixed Sources). Multi-column CSS-columns layout mixing G2 review cards (round red G2 icon, name + title attribution) with case study extract cards (customer logo, name + title attribution, right-aligned pink "Read the case study" link). 3 columns at desktop, 2 at tablet, 1 at mobile. - Added MODULE L.2 - Filter Dropdown Row (multi-group). Single centred row of dropdown triggers; each trigger is a .filter-chip with a label prefix and caret. Click to open menu listing options. Multi-group AND filtering. Companion to Module L's chip strip - use L.2 when too many options to display inline, or when filtering on multiple dimensions. - Added MODULE M.2 - Case Study Card. White card with logo top-left, pink "Read more →" top-right, full-width tapered offblack divider, H3 title, intro paragraph, divider, large pink metric (number/word/ icon) + bold wrapping label, info-chips row at bottom. Whole-card hover turns title pink. Companion to Module M (blog cards). Changes from v1.3 (2 May 2026 - second pass that day): - Added PAGE ARCHITECTURE section: width tokens documented in full, page-type playbook (marketing, blog index, blog article, customer main, case study), H1 size rules per page type. - Added new article H1 rule: .display-h1 used on blog/case study pages renders smaller (clamp 28-38px) than the main page H1 (clamp 40-64px). Documented as a deliberate hierarchy choice. - Added MODULE K - Article Meta Strip (tag chips + read-time + date + share row). Reusable for blog articles AND customer case studies. - Added MODULE L - Filter Chip Strip (chip strip with dividers above and below). Reusable for blog index filtering AND customer case study filtering. - Added .article-tag-chip component (offblack pill, white text, small) - used in meta strip AND in provider blocks. - Added blog two-column body grid spec (280px sidebar + 64px gap + 1fr main). - Added Read Next pattern (H4 title + pink "Read more >" link + offblack short divider between items). Changes from v1.2 (2 May 2026 - first pass): - Added .divider-offblack, -short, -vertical, -vertical-short (--ciq-offblack #494A4C, full opacity, gradient taper). - Added .divider-black, -short, -vertical, -vertical-short (--ciq-dark #2B2B2B, full opacity, gradient taper). - Existing .divider-pink* and .divider-dark* kept unchanged. ═══════════════════════════════════════════════════════════════ */ :root { /* Brand v2.0 — see CIQ_Brand_Foundations_v2.0 */ --ciq-pink: #FC49AB; /* only accent; opacity is its only variation */ --ciq-pink-hover: #E03D99; --ciq-black: #000000; --ciq-offblack: #494A4C; /* body copy, all other dark sections (heroes, dark cards, slides) */ --ciq-footer-black:#2B2B2B; /* footer ONLY — deliberately darker than offblack, do not reuse elsewhere */ --ciq-oatmeal-01: #F6F2EA; /* PRIMARY warm background */ --ciq-oatmeal-02: #FAF8F4; /* secondary warm background */ --ciq-white: #FFFFFF; /* Aliases — retained so existing markup keeps working */ --ciq-dark: var(--ciq-offblack); --ciq-oatmeal: var(--ciq-oatmeal-01); --text-heading:var(--ciq-dark); --text-body:var(--ciq-offblack); --text-secondary:#6B6C6E; --text-muted:#8E8E93; --border:#E5E5E5; --border-light:#F0F0F0; /* WIDTH TOKENS - documented in the Page Architecture section. Use these instead of inline max-width values. */ --max-width:1280px; /* outer container, nav, footer, all page wrappers */ --content-width:1080px; /* hero copy, page headers on marketing pages */ --read-width:760px; /* tight reading column (hero ledes, FAQ cards) */ --prose-wide:920px; /* wider prose - reserved, not currently used */ /* Blog article grid */ --blog-sidebar:280px; /* TOC + Read Next sidebar on blog article pages */ --blog-grid-gap:64px; /* gap between sidebar and main column */ --radius:6px; --radius-lg:12px; --radius-pill:999px; --font:'Space Grotesk',sans-serif; --shadow-md:0 4px 12px rgba(0,0,0,0.08); --shadow-lg:0 8px 30px rgba(0,0,0,0.1); --ease:cubic-bezier(0.4,0,0.2,1); } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; } body { font-family:var(--font); color:var(--text-body); line-height:1.6; font-size:16px; background:var(--ciq-white); } .container { max-width:var(--max-width); margin:0 auto; padding:0 32px; } h1,h2,h3,h4,h5,h6 { font-family:var(--font); color:var(--text-heading); font-weight:700; line-height:1.2; } .display-h1 { font-size:clamp(40px,5vw,64px); font-weight:700; letter-spacing:-0.02em; line-height:1.08; } /* Smaller H1 for blog articles and case study pages. Sits in a content-rich reading context (lede, meta strip, hero image carry the visual weight); the title doesn't need the marketing-page display scale. Apply .display-h1--article OR override .display-h1 in the article template's local CSS as we currently do. */ .display-h1--article { font-size:clamp(28px,3vw,38px); font-weight:700; letter-spacing:-0.02em; line-height:1.15; } h2 { font-size:clamp(24px,3vw,36px); letter-spacing:-0.01em; } h3 { font-size:24px; } h4 { font-size:18px; font-weight:600; } p { margin-bottom:16px; } p:last-child { margin-bottom:0; } .body-large { font-size:18px; line-height:1.7; } a { color:var(--ciq-pink); text-decoration:none; transition:color .2s var(--ease); } a:hover { color:var(--ciq-pink-hover); text-decoration:underline; } .text-pink { color:var(--ciq-pink); } .overline { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ciq-pink); margin-bottom:12px; display:block; } /* Dividers — gradient fade-out at edges, multiple lengths and orientations. Naming: divider-{colour}[-short|-vertical|-vertical-short] */ .divider-pink { height:2px; background:linear-gradient(90deg,transparent 0%,var(--ciq-pink) 30%,var(--ciq-pink) 70%,transparent 100%); border:none; margin:0; } .divider-dark { height:2px; background:linear-gradient(90deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; margin:0; opacity:.4; } .divider-pink-short { height:2px; width:120px; background:linear-gradient(90deg,transparent 0%,var(--ciq-pink) 30%,var(--ciq-pink) 70%,transparent 100%); border:none; margin:0; } .divider-dark-short { height:2px; width:120px; background:linear-gradient(90deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; margin:0; opacity:.4; } .divider-pink-vertical { width:2px; height:100%; min-height:60px; background:linear-gradient(180deg,transparent 0%,var(--ciq-pink) 30%,var(--ciq-pink) 70%,transparent 100%); border:none; } .divider-dark-vertical { width:2px; height:100%; min-height:60px; background:linear-gradient(180deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; opacity:.4; } .divider-pink-vertical-short { width:2px; height:80px; background:linear-gradient(180deg,transparent 0%,var(--ciq-pink) 30%,var(--ciq-pink) 70%,transparent 100%); border:none; } .divider-dark-vertical-short { width:2px; height:80px; background:linear-gradient(180deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; opacity:.4; } .divider-dark-solid { height:2px; background:var(--ciq-dark); border:none; margin:0; } /* ── Added in v1.3 ────────────────────────────────────────────────────── OFFBLACK — brand --ciq-offblack (#494A4C), full opacity, tapered ends. Medium-emphasis: meta strips, body-copy regions, content card breaks. */ .divider-offblack { height:2px; background:linear-gradient(90deg,transparent 0%,var(--ciq-offblack) 30%,var(--ciq-offblack) 70%,transparent 100%); border:none; margin:0; } .divider-offblack-short { height:2px; width:120px; background:linear-gradient(90deg,transparent 0%,var(--ciq-offblack) 30%,var(--ciq-offblack) 70%,transparent 100%); border:none; margin:0; } .divider-offblack-vertical { width:2px; height:100%; min-height:60px; background:linear-gradient(180deg,transparent 0%,var(--ciq-offblack) 30%,var(--ciq-offblack) 70%,transparent 100%); border:none; } .divider-offblack-vertical-short { width:2px; height:80px; background:linear-gradient(180deg,transparent 0%,var(--ciq-offblack) 30%,var(--ciq-offblack) 70%,transparent 100%); border:none; } /* BLACK — brand --ciq-dark (#2B2B2B), full opacity, tapered ends. Highest-emphasis non-pink separations: section breaks on light bg. */ .divider-black { height:2px; background:linear-gradient(90deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; margin:0; } .divider-black-short { height:2px; width:120px; background:linear-gradient(90deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; margin:0; } .divider-black-vertical { width:2px; height:100%; min-height:60px; background:linear-gradient(180deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; } .divider-black-vertical-short { width:2px; height:80px; background:linear-gradient(180deg,transparent 0%,var(--ciq-dark) 30%,var(--ciq-dark) 70%,transparent 100%); border:none; } /* Buttons .btn is the shared base (shape/spacing/typography). Every modifier below is written to also work stand-alone with no .btn present - the master guide documents .btn + modifier as the compositional pattern, but in practice across the live site only one button ever pairs them; every other button uses a single self-contained class (.btn-chip-pink etc). .btn-dark/.btn-secondary/.btn-ghost/.btn-on-dark are written defensively so they render correctly either way. */ .btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:14px 28px; border-radius:var(--radius-pill); border:none; cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; } .btn-pink { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:14px 28px; border-radius:var(--radius-pill); border:none; cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; background:var(--ciq-pink); color:var(--ciq-white); } .btn-pink:hover { background:var(--ciq-pink-hover); color:var(--ciq-white); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-dark { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:14px 28px; border-radius:var(--radius-pill); border:none; cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; background:var(--ciq-dark); color:var(--ciq-white); } .btn-dark:hover { background:#1a1a1a; color:var(--ciq-white); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-arrow { display:inline-flex; align-items:center; transition:transform .2s var(--ease); } .btn-pink, .btn-pink:hover, .btn-pink *, .btn-dark, .btn-dark:hover, .btn-dark * { color:var(--ciq-white); } .btn-pink svg, .btn-dark svg { stroke:var(--ciq-white); fill:none; } .btn:hover .btn-arrow, .btn-dark:hover .btn-arrow, .btn-pink:hover .btn-arrow { transform:translateX(2px); } .btn-secondary { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:14px 28px; border-radius:var(--radius-pill); cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; background:transparent; color:var(--text-body); border:1.5px solid var(--border); } .btn-secondary:hover { border-color:var(--ciq-offblack); color:var(--ciq-dark); text-decoration:none; } .btn-ghost { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; border:none; cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; background:transparent; color:var(--ciq-pink); padding:14px 0; } .btn-ghost:hover { color:var(--ciq-pink-hover); text-decoration:none; } .btn-on-dark { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-size:15px; font-weight:600; padding:14px 28px; border-radius:var(--radius-pill); border:none; cursor:pointer; transition:all .25s var(--ease); text-decoration:none; line-height:1; background:var(--ciq-white); color:var(--ciq-dark); } .btn-on-dark:hover { background:#f0f0f0; color:var(--ciq-dark); text-decoration:none; transform:translateY(-1px); } .btn-sm { font-size:13px; padding:10px 20px; } .btn-lg { font-size:17px; padding:18px 36px; } /* Nav */ .nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-light); padding:0 32px; } .nav-inner { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:72px; } .nav-logo img { height:28px; width:auto; } .nav-links { display:flex; align-items:center; gap:32px; list-style:none; } .nav-links a { font-size:15px; font-weight:500; color:var(--text-body); text-decoration:none; } .nav-links a:hover { color:var(--ciq-dark); text-decoration:none; } .nav-links a.pink-link { color:var(--ciq-pink); } /* Nav dropdown */ .nav-item { position:relative; } .nav-dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:var(--ciq-white); border:1px solid var(--border-light); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:8px 0; min-width:220px; opacity:0; visibility:hidden; transition:all .2s var(--ease); list-style:none; margin-top:8px; } .nav-item:hover .nav-dropdown { opacity:1; visibility:visible; margin-top:0; } .nav-dropdown li { list-style:none; } .nav-dropdown a { display:block; padding:10px 20px; font-size:14px; color:var(--text-body); } .nav-dropdown a:hover { background:var(--ciq-oatmeal); color:var(--ciq-dark); text-decoration:none; } .nav-caret { display:inline-block; margin-left:4px; font-size:10px; opacity:.6; } /* Nav dropdown, click-triggered variant (Book a demo) — same visual as .nav-dropdown, right-aligned under a nav-cta-group button */ .nav-demo-dropdown { position:relative; } .nav-demo-dropdown .nav-dropdown { left:auto; right:0; transform:none; } .nav-demo-dropdown .nav-dropdown.is-open { opacity:1; visibility:visible; margin-top:0; } /* Compliance badges */ .compliance-badge { display:flex; flex-direction:column; align-items:center; gap:12px; } .compliance-badge-img { width:96px; height:96px; background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; } .compliance-badge-img::before { content:"BADGE"; } .compliance-badge-label { font-size:13px; font-weight:600; color:var(--ciq-dark); margin:0; } /* Customer logo placeholder strip */ .logo-placeholder { height:32px; flex:1; max-width:120px; min-width:80px; background:var(--border-light); border-radius:4px; } /* Cards */ .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .feature-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; transition:all .3s var(--ease); } .feature-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } .feature-card--accent { border-top:3px solid var(--ciq-pink); } .feature-card--accent-dark { border-top:3px solid var(--ciq-dark); } .feature-card h4 { margin-bottom:8px; } .feature-card p { color:var(--text-secondary); font-size:15px; } /* RULE 3: Icons sit clean on the background — no borders, no shading boxes. Use icon-box-* variants below if you need a contained look. */ .icon-box { width:32px; height:32px; background:transparent; border:none; border-radius:0; display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .icon-box svg { width:32px; height:32px; } /* Stats */ .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } .stat { text-align:center; } .stat-number { font-size:48px; font-weight:700; color:var(--ciq-dark); letter-spacing:-0.02em; line-height:1; margin-bottom:8px; } .stat-number .pink { color:var(--ciq-pink); } .stat-label { font-size:14px; color:var(--text-secondary); } /* Callout — canonical rule lives further down in ARTICLE PROSE section (pink-left default, --dark variant) */ /* Testimonial */ .testimonial-card { background:var(--ciq-white); border:1px solid var(--border); border-left:4px solid var(--ciq-dark); border-radius:var(--radius); padding:32px 36px; } .testimonial-card blockquote { font-size:20px; font-weight:500; color:var(--ciq-dark); line-height:1.5; margin-bottom:16px; font-style:normal; } .testimonial-card blockquote::before { content:'\201C'; color:var(--ciq-pink); font-size:40px; font-weight:700; line-height:0; vertical-align:-12px; margin-right:4px; } .testimonial-meta { font-size:14px; color:var(--text-secondary); } .testimonial-meta strong { color:var(--text-body); } .pull-quote { font-size:clamp(24px,3vw,32px); font-weight:600; color:var(--ciq-dark); line-height:1.35; border-left:4px solid var(--ciq-dark); padding-left:24px; } .pull-quote--pink { border-left-color:var(--ciq-pink); } /* Module J.1 NEW VARIANT v1.7 - testimonial card with shadow lift. Standard .testimonial-card stays unchanged. The --pop variant adds --shadow-md for visual lift inside long-form reading contexts. */ .testimonial-card--pop { box-shadow:var(--shadow-md); } /* Module H.5 NEW v1.7 - Case Study Hero (full-bleed dark, pink + purple glows) */ .case-study-hero { position:relative; background:var(--ciq-dark); color:var(--ciq-white); padding:80px 0 64px; overflow:hidden; } .case-study-hero::before { content:""; position:absolute; top:-160px; right:-120px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(252,73,171,.38) 0%, rgba(252,73,171,0) 60%); pointer-events:none; z-index:0; } .case-study-hero::after { content:""; position:absolute; top:60px; right:200px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(180,80,200,.22) 0%, rgba(180,80,200,0) 60%); pointer-events:none; z-index:0; } .case-study-hero .container { position:relative; z-index:1; } .case-study-hero h1, .case-study-hero .display-h1 { color:var(--ciq-white); margin-bottom:24px; font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-0.02em; } .case-study-hero .lede { font-size:20px; line-height:1.55; color:rgba(255,255,255,.78); margin-bottom:48px; } @media (max-width:768px) { .case-study-hero { padding:56px 0 48px; } } /* Module D.1 NEW VARIANTS v1.7 - case study hero stats strip Same component, different grid templates. Use --1up for customers with one stat (Mando, Anon FinTech, Instant Impact); --2up for two; --3up for three (About:Energy, Zoomo). v1.7.1 fix: stats now show VERTICAL DIVIDERS between cells via border-right + matched padding, instead of relying on grid gap. The 1-up variant has no neighbouring cells so no divider applies. */ .cs-hero-stats { display:grid; gap:0; padding-top:32px; border-top:1px solid rgba(255,255,255,.16); } .cs-hero-stats--1up { grid-template-columns:1fr; max-width:480px; margin:0 auto; text-align:center; } .cs-hero-stats--2up { grid-template-columns:repeat(2,1fr); } .cs-hero-stats--3up { grid-template-columns:repeat(3,1fr); } .cs-hero-stat { color:var(--ciq-white); padding:0 32px; border-right:1px solid rgba(255,255,255,.12); } .cs-hero-stat:first-child { padding-left:0; } .cs-hero-stat:last-child { border-right:none; padding-right:0; } /* 1-up variant has only one cell, so no divider applies. Override padding so the single cell sits cleanly within its 480px column. */ .cs-hero-stats--1up .cs-hero-stat { padding:0; border-right:none; } .cs-hero-stat-num { font-size:clamp(34px,4vw,48px); font-weight:700; letter-spacing:-0.02em; line-height:1.05; color:var(--ciq-white); display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin-bottom:8px; } .cs-hero-stat-num .arrow { color:var(--ciq-pink); margin:0 6px; font-weight:600; } .cs-hero-stat-label { font-size:14px; line-height:1.5; color:rgba(255,255,255,.6); } @media (max-width:760px) { .cs-hero-stats--3up, .cs-hero-stats--2up { grid-template-columns:1fr; gap:24px; } .cs-hero-stats--3up .cs-hero-stat, .cs-hero-stats--2up .cs-hero-stat { padding:0; border-right:none; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:24px; } .cs-hero-stats--3up .cs-hero-stat:last-child, .cs-hero-stats--2up .cs-hero-stat:last-child { border-bottom:none; padding-bottom:0; } } /* Module K base - .cs-meta-pill (NEW v1.9 codified - was used in v1.7+ but never given a base class definition in the master guide). Inline pill with pink-stroke icon + label. Used on case study meta strips for industry/headcount/location, and on the pricing page to show the headcount band next to the price. */ .cs-meta-pill { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--text-body); } .cs-meta-pill svg { width:16px; height:16px; stroke:var(--ciq-pink); flex-shrink:0; } /* Module K NEW VARIANT v1.7 - case study meta pill, date variant. Smaller font, neutral icon stroke - reads as metadata not category. */ .cs-meta-pill--date { font-size:13px; color:var(--text-secondary); } .cs-meta-pill--date svg { stroke:var(--text-secondary); width:14px; height:14px; } /* Module K NEW v1.9 - .cs-meta horizontal strip with three icon pills. Used on case study and pricing pages to show Industry, Headcount, Location side-by-side with vertical dividers between. Each pill is a .cs-meta-pill with one of three pink-stroke icons. */ .cs-meta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:24px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); } .cs-meta-left { display:flex; align-items:center; gap:20px; flex-wrap:wrap; } .cs-meta-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .cs-meta-divider { width:1px; height:18px; background:var(--border); flex-shrink:0; } @media (max-width:600px) { .cs-meta { flex-direction:column; align-items:flex-start; gap:14px; } .cs-meta-divider { display:none; } } /* Module K NEW v1.7 - case study author / customer info row, centred composition. Sits directly below the meta strip on case study pages. The two halves (author cluster + customer logo) are centred together with an INSET 1px vertical divider between them. The strip itself has only a 1px border-bottom. */ .cs-author-strip { display:flex; justify-content:center; padding:24px 0 32px; border-bottom:1px solid var(--border-light); } .cs-author-inner { display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; } .cs-author-divider { width:1px; height:40px; background:var(--border); flex-shrink:0; } .cs-author-left { display:flex; align-items:center; gap:14px; } .cs-author-avatar { width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--ciq-oatmeal); } .cs-author-avatar img { width:100%; height:100%; object-fit:cover; display:block; } .cs-author-info { display:flex; flex-direction:column; gap:2px; line-height:1.3; } .cs-author-info .nm { font-size:15px; font-weight:600; color:var(--ciq-dark); display:inline-flex; align-items:center; gap:8px; } .cs-author-info .nm .li-link { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:#0A66C2; text-decoration:none; } .cs-author-info .nm .li-link:hover { color:#0A66C2; opacity:.75; text-decoration:none; } .cs-author-info .nm .li-link svg { width:16px; height:16px; } .cs-author-info .role { font-size:13px; color:var(--text-secondary); } .cs-author-right { display:flex; align-items:center; } .cs-author-customer-logo { height:32px; max-width:180px; } .cs-author-customer-logo img { height:100%; width:auto; display:block; } @media (max-width:700px) { .cs-author-inner { flex-direction:column; gap:18px; } .cs-author-divider { display:none; } } /* Module T NEW v1.7 - Callout List. Stacked-list component for use INSIDE long-form blog and case study prose. Each row: circular pink badge on the left (numbered .--num variant or icon .--icon variant) + H4 + body copy on the right. Vertical stack, generous spacing, no card backgrounds. Reads as part of the prose, not a separate card module. Use .clt strong-copy fallback if H4 is already taken in the article hierarchy. */ .callout-list { margin:32px 0; display:flex; flex-direction:column; gap:32px; } .callout-list-row { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start; } .callout-list-badge { width:36px; height:36px; border-radius:50%; background:var(--ciq-pink); color:var(--ciq-white); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .callout-list-badge--num { font-family:var(--font); font-size:15px; font-weight:700; line-height:1; } .callout-list-badge--icon svg { width:18px; height:18px; stroke:var(--ciq-white); } .callout-list-content h4 { font-size:18px; font-weight:600; color:var(--ciq-dark); margin:0 0 8px; line-height:1.3; } .callout-list-content .clt { display:block; font-size:18px; font-weight:600; color:var(--ciq-dark); margin-bottom:8px; line-height:1.3; } .callout-list-content p { font-size:16px; line-height:1.7; color:var(--text-body); margin:0; } /* NEW v1.9: --dark variant. Black/offblack badge instead of pink, for use in contexts where pink is reserved for accents elsewhere on the same page. Apply to the parent .callout-list or to individual .callout-list-badge elements. */ .callout-list--dark .callout-list-badge, .callout-list-badge--dark { background:var(--ciq-offblack); } @media (max-width:600px) { .callout-list { gap:24px; } .callout-list-row { gap:16px; } .callout-list-content h4, .callout-list-content .clt { font-size:17px; } .callout-list-content p { font-size:15px; } } /* Module U NEW v1.7 - NPS Card. Dark card with pink glow bottom-right. Big two-tone number on the left (.nine span pink first digit, white denominator) + label + supporting paragraph on the right. Same font weight (700) and letter-spacing (-0.02em) as the hero stats so visual register is consistent across the page. Reusable for any "X / 10" rating moment. */ .nps-card { background:var(--ciq-dark); color:var(--ciq-white); border-radius:var(--radius-lg); padding:36px 40px; margin:32px 0; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; position:relative; overflow:hidden; } .nps-card::before { content:""; position:absolute; bottom:-80px; right:-60px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(252,73,171,.25) 0%, rgba(252,73,171,0) 60%); pointer-events:none; } .nps-card-num { font-size:64px; font-weight:700; letter-spacing:-0.02em; line-height:.95; position:relative; z-index:1; color:var(--ciq-white); } .nps-card-num .nine { color:var(--ciq-pink); } .nps-card-text { position:relative; z-index:1; } .nps-card-text-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ciq-pink); margin-bottom:6px; display:block; } .nps-card-text p { font-size:15px; line-height:1.55; color:rgba(255,255,255,.85); margin:0; } @media (max-width:600px) { .nps-card { grid-template-columns:1fr; gap:16px; padding:28px; } .nps-card-num { font-size:52px; } } /* Module O.4 NEW v1.7.1 - CTA Banner / Full-Bleed Dark Band. First full-bleed CTA in the family (N, O.1, O.2, O.3 are all inset rounded cards). Dark background spans the full viewport width edge-to-edge. Pink radial glow top-LEFT (large, 480px, 30% opacity) + secondary purple-pink glow bottom-RIGHT (380px, 20% opacity). Centred content column at 760px max-width. PLACEMENT RULE: do NOT place directly above Module Q footer (also dark) - the dark-on-dark stack reads as one heavy block. Use as a section break BETWEEN two light-background modules earlier in the page; use the inset-rounded-card CTAs (N / O.1 / O.2 / O.3) as the pre-footer closer instead. */ .cta-band-fullbleed { background:var(--ciq-dark); color:var(--ciq-white); padding:80px 0; position:relative; overflow:hidden; } .cta-band-fullbleed::before { content:""; position:absolute; top:-100px; left:-80px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(252,73,171,.30) 0%, rgba(252,73,171,0) 60%); pointer-events:none; } .cta-band-fullbleed::after { content:""; position:absolute; bottom:-150px; right:-40px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(180,80,200,.20) 0%, rgba(180,80,200,0) 60%); pointer-events:none; } .cta-band-fullbleed-inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:1; padding:0 32px; } .cta-band-fullbleed-inner h2 { color:var(--ciq-white); margin-bottom:16px; } .cta-band-fullbleed-inner p { font-size:18px; color:rgba(255,255,255,.78); margin-bottom:32px; } .cta-band-fullbleed-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .cta-band-fullbleed-actions .secondary-on-dark { background:transparent; border:1.5px solid rgba(255,255,255,.25); color:var(--ciq-white); } .cta-band-fullbleed-actions .secondary-on-dark:hover { background:rgba(255,255,255,.06); color:var(--ciq-white); text-decoration:none; } /* ═══════════════════════════════════════════════════════════════ MODULE O.5 — GLOBAL ARTICLE CTA (NEW v1.15) Full-width CTA for use inside blog articles and case studies. Spans the complete main column — no inner read-width constraint. Same dark rounded card as Module N; sits between article sections or directly above the article FAQ block. Do NOT place directly above Module Q footer. Copy: use one of the three agreed Salary Benchmarking variants from the Global CTA Links reference block in Page Architecture. ═══════════════════════════════════════════════════════════════ */ .article-cta { background:var(--ciq-dark); border-radius:var(--radius-lg); padding:48px 40px; margin:48px 0; text-align:center; position:relative; overflow:hidden; } .article-cta::before { content:""; position:absolute; top:-60px; right:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(252,73,171,.22) 0%, rgba(252,73,171,0) 60%); pointer-events:none; } .article-cta-inner { position:relative; z-index:1; } .article-cta h2 { color:var(--ciq-white); font-size:clamp(22px,2.5vw,30px); margin-bottom:12px; text-wrap:balance; } .article-cta p { color:rgba(255,255,255,.78); font-size:16px; margin-bottom:28px; max-width:560px; margin-left:auto; margin-right:auto; } .article-cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* Steps — Module G, 4-column numbered process steps */ .steps-section { background:var(--ciq-white); padding:80px 0; } .steps-header { text-align:center; max-width:680px; margin:0 auto 32px; padding:0 32px; } .steps { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; max-width:var(--max-width); margin:0 auto; padding:0 32px; } @media (max-width:1000px) { .steps { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { .steps { grid-template-columns:1fr; } } .step-number { width:40px; height:40px; background:var(--ciq-dark); color:var(--ciq-white); font-size:16px; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .step h4 { margin-bottom:8px; } .step p { font-size:15px; color:var(--text-secondary); } /* Blog */ .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .blog-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all .3s var(--ease); } .blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } .blog-card-image { width:100%; height:200px; object-fit:cover; display:block; } .blog-card-body { padding:24px; } .blog-card-tag { display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ciq-pink); margin-bottom:8px; } .blog-card-body h4 { margin-bottom:8px; font-size:17px; line-height:1.35; } .blog-card-body p { font-size:14px; color:var(--text-secondary); } .blog-card-footer { padding:0 24px 24px; font-size:13px; color:var(--text-muted); } /* Pricing */ .pricing-section { display:grid; grid-template-columns:1fr 1fr; } .pricing-dark { background:var(--ciq-dark); color:white; padding:64px 48px; border-radius:var(--radius-lg) 0 0 var(--radius-lg); } .pricing-light { background:var(--ciq-white); padding:64px 48px; border:1px solid var(--border); border-left:none; border-radius:0 var(--radius-lg) var(--radius-lg) 0; } .pricing-check { display:flex; gap:16px; margin-bottom:24px; } .pricing-check-icon { width:28px; height:28px; background:rgba(255,255,255,.12); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .pricing-check-icon svg { width:14px; height:14px; } .pricing-light .pricing-check-icon { background:var(--ciq-oatmeal); } .pricing-light .pricing-check-icon svg { stroke:var(--ciq-dark); } /* ═══════════════════════════════════════════════════════════════ MODULE Q — Footer (Dark, GLOBAL MODULE) Centrally controlled. Defined ONCE here. Used identically on every page. Change once, update everywhere. Anatomy (4-column grid: 2fr / 1fr / 1fr / 1fr): - Left block (2fr): white wordmark logo + 3 contact rows (correspondence address, LinkedIn, Contact us). - Columns 2-4 (1fr each): named link groups Platform, Insights Hub, Company. Column headings are visual signposts (NOT linked). - Divider line, then bottom row (1fr / auto): - Left: copyright line + dimmer secondary line with full legal (Co. registration, registered office, VAT). - Right: Terms + Privacy Policy (right-aligned). Icons: from Module K family. Use currentColor so they inherit parent text colour - rgba(255,255,255,.6) here on the dark bg, brighten to white on hover with the link. TODO before production: - Compliance badges row (SOC 2, GDPR, Cyber Essentials) — three badges only. awaiting partner logos. Will sit between footer-grid and footer-divider when added. - Cookie Preferences link to be auto-injected by chosen consent tool pre-launch (P1 task on migration plan). ═══════════════════════════════════════════════════════════════ */ .footer { background:var(--ciq-footer-black); color:rgba(255,255,255,.6); padding:64px 0 32px; font-family:var(--font); } /* Top grid: 2fr left contact block + 3x 1fr link columns */ .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; } /* Left contact block */ .footer-contact { max-width:320px; } .footer-logo { margin-bottom:32px; } .footer-logo svg { display:block; } /* Contact rows: icon + label/link pairs */ .footer-contact-list { display:flex; flex-direction:column; gap:14px; } .footer-contact-row { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.6); line-height:1.5; transition:color .2s var(--ease); } .footer-contact-row a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:12px; padding:0; transition:color .2s var(--ease); } .footer-contact-row a:hover { color:var(--ciq-white); text-decoration:none; } /* Module K icon system — dark bg variant. Stroke icons inherit parent text colour via currentColor. */ .footer-contact-row svg { width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* LinkedIn icon - filled variant. Uses fill:currentColor instead of stroke. */ .footer-contact-row svg.icon-linkedin { fill:currentColor; stroke:none; } /* Right side: 3 link columns */ .footer h5 { color:var(--ciq-white); font-family:var(--font); font-size:14px; font-weight:600; margin-bottom:16px; } .footer-col a { color:rgba(255,255,255,.6); font-family:var(--font); font-size:14px; text-decoration:none; display:block; padding:4px 0; transition:color .2s var(--ease); } .footer-col a:hover { color:var(--ciq-white); text-decoration:none; } /* Divider line between top grid and bottom row */ .footer-divider { border:none; border-top:1px solid rgba(255,255,255,.1); margin:0 0 24px 0; } /* Bottom row — 2 sections: legal block (left) | T&Cs (right) */ .footer-bottom { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:start; font-size:13px; color:rgba(255,255,255,.6); font-family:var(--font); } .footer-bottom-left { text-align:left; max-width:720px; } .footer-bottom-left .copyright { display:block; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:6px; } .footer-bottom-left .registered { display:block; font-size:12px; color:rgba(255,255,255,.4); line-height:1.6; } .footer-bottom-right { display:flex; gap:24px; align-items:flex-start; justify-self:end; } .footer-bottom-right a { color:rgba(255,255,255,.6); text-decoration:none; font-size:13px; transition:color .2s var(--ease); } .footer-bottom-right a:hover { color:var(--ciq-white); } /* Mobile reflow */ @media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; gap:40px; } .footer-contact { grid-column:1 / -1; max-width:none; } .footer-bottom { grid-template-columns:1fr; gap:16px; text-align:left; } .footer-bottom-right { justify-self:start; } } @media (max-width:600px) { .footer-grid { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════ SHARED COMPONENT — Article Tag Chip (offblack pill, white text) Reusable across: blog meta strip, blog provider blocks, customer case study meta strip, customer case study tags. NOT clickable - it is a signpost, not a filter link. ═══════════════════════════════════════════════════════════════ */ .article-tag-chip { display:inline-flex; align-items:center; background:var(--ciq-offblack); color:var(--ciq-white); border-radius:var(--radius-pill); padding:4px 12px; font-family:var(--font); font-size:12px; font-weight:500; line-height:1.4; white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════ MODULE K — Article Meta Strip Used on: blog articles (no-TOC + with-TOC), customer case studies. Layout: tag chips + read-time + date on left, share row on right. All icons + text in body-text grey. No pink. Below 640px wraps to two rows. ═══════════════════════════════════════════════════════════════ */ .article-meta { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:20px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); } .article-meta-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .article-meta-tags { display:flex; gap:6px; flex-wrap:wrap; } .meta-pill { font-size:13px; color:var(--text-body); display:inline-flex; align-items:center; gap:8px; } .meta-pill svg { width:14px; height:14px; stroke:var(--text-body); } .share-row { display:flex; gap:8px; } .share-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--ciq-white); display:inline-flex; align-items:center; justify-content:center; color:var(--text-body); transition:all .2s var(--ease); cursor:pointer; text-decoration:none; } .share-btn:hover { border-color:var(--text-body); color:var(--ciq-dark); text-decoration:none; } .share-btn svg { width:16px; height:16px; } /* ═══════════════════════════════════════════════════════════════ MODULE L — Filter Chip Strip Used on: blog index, customer case study index. Layout: long pink divider above, chip strip with breathing space on each side, long pink divider below. 24px gap between dividers and chip strip; 32px breathing space outside the chips. First chip is "All" / "All articles" / "All studies" (default). Active chip uses --ciq-offblack background, white text (corrected in v1.5; was --ciq-pink in v1.4 - pink is reserved for CTAs and brand accents, not filter selection state). Inactive chip uses transparent background with offblack border. ═══════════════════════════════════════════════════════════════ */ .filter-strip { padding:24px 0; } .filter-strip-inner { display:flex; gap:8px; flex-wrap:wrap; padding:0 32px; margin:24px 0; } /* Module L spec: 24px gap between dividers and chip strip */ .filter-chip { display:inline-flex; align-items:center; padding:8px 16px; border-radius:var(--radius-pill); font-family:var(--font); font-size:13px; font-weight:500; line-height:1; color:var(--text-body); background:transparent; border:1px solid var(--ciq-offblack); cursor:pointer; transition:all .2s var(--ease); white-space:nowrap; text-decoration:none; } .filter-chip:hover { border-color:var(--ciq-dark); color:var(--ciq-dark); text-decoration:none; } .filter-chip.is-active { background:var(--ciq-offblack); border-color:var(--ciq-offblack); color:var(--ciq-white); } .filter-chip.is-active:hover { background:var(--ciq-dark); border-color:var(--ciq-dark); color:var(--ciq-white); } /* ═══════════════════════════════════════════════════════════════ MODULE B.2 — Index Hero (Compact, Centred) NEW v1.5 Used on: customer index, blog index, any index page that hands off immediately to a content section below (no need for full Module B hero with CTAs and image). Layout: overline + H1 only, centre-aligned, 96px top / 56px bottom padding, white background, no subline, no logo strip. ═══════════════════════════════════════════════════════════════ */ .hero-compact { background:var(--ciq-white); padding:96px 0 56px; } .hero-compact-inner { max-width:var(--content-width); margin:0 auto; padding:0 32px; text-align:center; } .hero-compact h1 { margin-bottom:0; text-wrap:balance; } .hero-compact p { font-size:18px; line-height:1.6; color:var(--text-secondary); max-width:680px; margin:16px auto 0; text-wrap:balance; } @media (max-width:640px) { .hero-compact { padding:48px 0 32px; } } /* ═══════════════════════════════════════════════════════════════ MODULE H.4 — Featured Story (Dark, Pink Glow Left) NEW v1.5 Variant of Module H.3 with the pink glow flipped to the LEFT so the right column is clean for embedded card components (case study cards, blog cards). H2 + CTA on left; embedded card on right with --shadow-lg lift. Used on: customer index featured story, blog index featured article. Sits as a rounded inset block inside the page max-width (not full-bleed). ═══════════════════════════════════════════════════════════════ */ .featured-block { background:var(--ciq-dark); border-radius:var(--radius-lg); padding:64px 48px; position:relative; overflow:hidden; } .featured-block::before { content:""; position:absolute; top:-100px; left:-80px; width:480px; height:480px; background:radial-gradient(circle, rgba(252,73,171,.35) 0%, rgba(252,73,171,0) 60%); border-radius:50%; pointer-events:none; } .featured-block::after { content:""; position:absolute; bottom:-150px; left:100px; width:380px; height:380px; background:radial-gradient(circle, rgba(180,80,200,.25) 0%, rgba(180,80,200,0) 60%); border-radius:50%; pointer-events:none; } .featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:1; } @media (max-width:900px) { .featured-grid { grid-template-columns:1fr; gap:32px; } } .featured-copy h2 { margin:0 0 28px; color:var(--ciq-white); } .featured-card-slot .cs-card, .featured-card-slot .blog-card { box-shadow:var(--shadow-lg); } /* ═══════════════════════════════════════════════════════════════ MODULE J.3 — Quote Wall Masonry (Mixed Sources) NEW v1.5 Used on: customer index quote wall, anywhere a mixed social proof wall is needed. Layout: CSS-columns masonry. 3 columns at desktop (>1024px), 2 at tablet (640-1024px), 1 at mobile (<640px). Cards mix .qw-card--g2 (round red G2 icon, name + title attribution) with .qw-card--case (customer logo, name + title attribution, right-aligned pink "Read the case study" link). Background: white or oatmeal. Card border: offblack. ═══════════════════════════════════════════════════════════════ */ .qw-grid { column-count:3; column-gap:24px; } @media (max-width:1024px) { .qw-grid { column-count:2; } } @media (max-width:640px) { .qw-grid { column-count:1; } } .qw-card { display:flex; flex-direction:column; gap:14px; padding:24px; margin:0 0 24px; background:var(--ciq-white); border:1px solid var(--ciq-offblack); border-radius:var(--radius-lg); break-inside:avoid; -webkit-column-break-inside:avoid; transition:box-shadow .2s var(--ease), transform .2s var(--ease); } .qw-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } .qw-g2-icon { width:36px; height:36px; flex-shrink:0; display:block; } .qw-logo { height:32px; display:flex; align-items:center; } .qw-logo img { max-height:28px; max-width:140px; width:auto; } .qw-quote { font-family:var(--font); font-size:16px; font-weight:400; line-height:1.55; color:var(--ciq-offblack); margin:0; quotes:'\201C' '\201D'; } .qw-quote::before { content:open-quote; } .qw-quote::after { content:close-quote; } .qw-attribution { display:flex; flex-direction:column; gap:2px; padding-top:12px; border-top:1px solid var(--border-light); } .qw-name { font-size:14px; font-weight:600; color:var(--ciq-dark); } .qw-title { font-size:13px; color:var(--text-secondary); } .qw-readlink { display:inline-flex; align-self:flex-end; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--ciq-pink); text-decoration:none; margin-top:-4px; } .qw-readlink svg { width:14px; height:14px; transition:transform .2s var(--ease); } .qw-readlink:hover { color:var(--ciq-pink-hover); text-decoration:none; } .qw-readlink:hover svg { transform:translateX(2px); } /* ═══════════════════════════════════════════════════════════════ MODULE L.2 — Filter Dropdown Row (multi-group) NEW v1.5 Companion to Module L. Use L.2 when too many filter options to display inline, or when filtering on multiple dimensions (industry / headcount / location / etc). Layout: single centred row of dropdown groups. Each group is a label prefix + a .filter-chip trigger pill (caret icon) + a menu that opens below on click. Multi-group AND filtering. Trigger pill always reads as is-active because "All" is itself a selection (not a null state). Used on: customer case study index. Pair with Module L for simpler one-dimensional filter cases. ═══════════════════════════════════════════════════════════════ */ .filter-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px; } @media (max-width:640px) { .filter-row { gap:16px; flex-direction:column; align-items:stretch; } } .filter-group { position:relative; display:inline-flex; align-items:center; gap:10px; } @media (max-width:640px) { .filter-group { justify-content:space-between; } } .filter-group-label { font-size:13px; font-weight:600; color:var(--ciq-dark); white-space:nowrap; } .filter-trigger { gap:8px; } .filter-trigger svg { width:12px; height:12px; transition:transform .2s var(--ease); flex-shrink:0; } .filter-group.is-open .filter-trigger svg { transform:rotate(180deg); } .filter-menu { position:absolute; top:calc(100% + 8px); left:auto; right:0; min-width:220px; background:var(--ciq-white); border:1px solid var(--border-light); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:8px 0; z-index:20; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s var(--ease), transform .15s var(--ease), visibility .15s var(--ease); list-style:none; margin:0; max-height:320px; overflow-y:auto; } .filter-group.is-open .filter-menu { opacity:1; visibility:visible; transform:translateY(0); } .filter-menu li { list-style:none; } .filter-option { display:block; width:100%; padding:10px 20px; font-family:var(--font); font-size:14px; color:var(--text-body); background:transparent; border:none; text-align:left; cursor:pointer; transition:background .15s var(--ease), color .15s var(--ease); text-decoration:none; } .filter-option:hover { background:var(--ciq-oatmeal); color:var(--ciq-dark); text-decoration:none; } .filter-option.is-active { color:var(--ciq-pink); font-weight:600; } /* ═══════════════════════════════════════════════════════════════ MODULE M.2 — Case Study Card NEW v1.5 Used on: customer case study index grid, related-stories blocks, anywhere a case study is featured. Companion to Module M (blog cards) - structurally different. Layout: white card, offblack border, 28px padding. - Head row: logo top-left, pink "Read more →" top-right - Full-width tapered offblack divider - H3 title (turns pink on whole-card hover, not just on title text hover) - Intro paragraph - Full-width tapered offblack divider - Metric row: large pink number/word/icon (44px) + bold wrapping label (16px). Number stays anchored left; label wraps internally beside it if long. Consistent 44px row height across "90%", "9/10", "Zero", or icon variants. - Info chips at bottom: industry / headcount / location (.article-tag-chip) ═══════════════════════════════════════════════════════════════ */ .cs-card-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } @media (max-width:1024px) { .cs-card-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width:640px) { .cs-card-grid { grid-template-columns:1fr; } } .cs-card { background:var(--ciq-white); border:1px solid var(--ciq-offblack); border-radius:var(--radius-lg); padding:28px; display:flex; flex-direction:column; gap:20px; transition:box-shadow .2s var(--ease), transform .2s var(--ease); position:relative; } .cs-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); } .cs-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; } .cs-card-logo { display:flex; align-items:center; height:36px; } .cs-card-logo img { max-height:32px; max-width:140px; width:auto; } .cs-card-readlink { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ciq-pink); text-decoration:none; transition:color .2s var(--ease); white-space:nowrap; } .cs-card-readlink svg { width:14px; height:14px; transition:transform .2s var(--ease); } .cs-card-readlink:hover { color:var(--ciq-pink-hover); text-decoration:none; } .cs-card-readlink:hover svg { transform:translateX(2px); } .cs-card-divider { width:100%; height:2px; background:linear-gradient(90deg,transparent 0%,var(--ciq-offblack) 30%,var(--ciq-offblack) 70%,transparent 100%); border:none; margin:0; } .cs-card-title { font-size:22px; font-weight:600; line-height:1.3; color:var(--ciq-dark); margin:0; transition:color .2s var(--ease); } .cs-card-title a { color:inherit; text-decoration:none; } .cs-card:hover .cs-card-title, .cs-card:hover .cs-card-title a { color:var(--ciq-pink); } .cs-card-intro { font-size:15px; line-height:1.55; color:var(--ciq-offblack); margin:0; } .cs-card-metric { display:flex; align-items:flex-start; gap:14px; margin:0; font-family:var(--font); min-height:44px; } .cs-card-metric-num { font-weight:700; font-size:44px; line-height:1; color:var(--ciq-pink); letter-spacing:-0.02em; display:inline-flex; align-items:center; flex-shrink:0; height:44px; } .cs-card-metric-num--icon { line-height:0; } .cs-card-metric-num--icon svg { width:44px; height:44px; display:block; } .cs-card-metric-label { font-family:var(--font); font-size:16px; font-weight:700; color:var(--ciq-dark); line-height:1.35; flex:1 1 0; min-width:0; align-self:center; } .cs-card-info-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; } /* ═══════════════════════════════════════════════════════════════ BLOG ARTICLE GRID — two-column body layout Used on: blog article (no-TOC + with-TOC). Outer container at --max-width with 32px padding each side. Sidebar at --blog-sidebar (280px) + --blog-grid-gap (64px) + main column at minmax(0, 1fr) so it expands to fill the rest. Right edge of main column = right edge of header above + right edge of index grid above. Below 1024px the sidebar collapses to the top of the layout (full width). ═══════════════════════════════════════════════════════════════ */ .article-layout { max-width:var(--max-width); margin:0 auto; padding:48px 32px 96px; display:grid; grid-template-columns: var(--blog-sidebar) minmax(0, 1fr); gap:var(--blog-grid-gap); align-items:start; } .article-sidebar { position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; padding-right:8px; } /* ═══════════════════════════════════════════════════════════════ READ NEXT — sidebar related-articles list Used on: blog article (no-TOC + with-TOC). Sits in the sidebar, under the TOC on the with-TOC variant, on its own on the no-TOC variant. Heading + 3 entries with .divider-offblack-short between. ═══════════════════════════════════════════════════════════════ */ .read-next { margin-top:48px; } .read-next-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:16px; } .read-next-list { list-style:none; padding:0; margin:0; } .read-next-item { padding:16px 0; } .read-next-item:first-of-type { padding-top:0; } .read-next-item h4 { font-size:15px; font-weight:600; line-height:1.3; color:var(--ciq-dark); margin:0 0 8px; } .read-next-item a.read-more-link { font-size:13px; font-weight:600; color:var(--ciq-pink); text-decoration:none; display:inline-flex; align-items:center; gap:4px; transition:color .2s var(--ease); } .read-next-item a.read-more-link:hover { color:var(--ciq-pink-hover); text-decoration:none; } .read-next-item a.read-more-link svg { width:12px; height:12px; } /* ═══════════════════════════════════════════════════════════════ BLOG ARTICLE — reading progress bar ═══════════════════════════════════════════════════════════════ */ .reading-progress { position:fixed; top:0; left:0; height:3px; background:var(--ciq-pink); width:0%; z-index:200; transition:width .1s linear; } /* ═══════════════════════════════════════════════════════════════ BLOG ARTICLE HEADER + HERO IMAGE article-header: H1 + lede + meta strip. Full --max-width container, left-aligned. article-hero-image sits outside article-layout grid. ═══════════════════════════════════════════════════════════════ */ .article-header { padding:48px 0 32px; } .article-header .container { max-width:var(--max-width); } .article-header h1 { margin-bottom:24px; } .article-header .lede { font-size:20px; line-height:1.55; color:var(--text-secondary); margin-bottom:32px; } .article-hero-image { width:100%; max-width:var(--max-width); margin:0 auto; padding:0 32px; } .article-hero-image img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); display:block; } /* ═══════════════════════════════════════════════════════════════ TOC RAIL — sticky left sidebar (with-TOC template only) Collapses to static full-width at 1024px; mobile disclosure (
) replaces it below 1024px. ═══════════════════════════════════════════════════════════════ */ .toc-rail { position:sticky; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; padding-right:8px; } .toc-rail::-webkit-scrollbar { width:4px; } .toc-rail::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; } .toc-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:16px; } .toc-list { list-style:none; } .toc-list li { margin:0; } .toc-list a { display:block; padding:6px 0; font-size:14px; font-weight:500; line-height:1.45; color:var(--text-body); text-decoration:none; transition:color .15s; } .toc-list a:hover { color:var(--ciq-dark); text-decoration:none; } .toc-list a.is-active { color:var(--ciq-pink); font-weight:600; } .toc-list .toc-h3 a { padding-left:14px; font-size:13px; color:var(--text-body); } .toc-list .toc-h3 a.is-active { color:var(--ciq-pink); } .toc-disclosure { display:none; margin:0 0 32px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--ciq-white); } .toc-disclosure summary { padding:14px 20px; font-size:14px; font-weight:600; color:var(--ciq-dark); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } .toc-disclosure summary::-webkit-details-marker { display:none; } .toc-disclosure summary::after { content:'▾'; font-size:11px; color:var(--text-muted); transition:transform .2s; } .toc-disclosure[open] summary::after { transform:rotate(180deg); } .toc-disclosure .toc-list { padding:0 12px 12px; } .toc-disclosure .toc-list a { border-left:none; padding-left:8px; } .toc-disclosure .toc-list .toc-h3 a { padding-left:24px; } /* Article body wrapper — prevents prose column blowing out grid */ .article-body-wrap { min-width:0; } /* Article H1 — smaller scale inside article/CS reading contexts */ .article-header h1, .article-header .display-h1 { font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-0.02em; } /* Impact strip — 3-up stats recap used in customer case studies (Module D.1 light variant) */ .impact-strip { background:var(--ciq-oatmeal); border-radius:var(--radius-lg); padding:40px 32px; margin:32px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .impact-stat { padding:0 16px; border-right:1px solid var(--border); } .impact-stat:last-child { border-right:none; } .impact-stat-num { font-size:34px; font-weight:700; letter-spacing:-0.02em; color:var(--ciq-pink); line-height:1; margin-bottom:8px; } .impact-stat-num .arrow { color:var(--ciq-dark); margin:0 4px; } .impact-stat-label { font-size:14px; line-height:1.5; color:var(--text-body); } @media (max-width:768px) { .impact-strip { grid-template-columns:1fr; gap:20px; } .impact-stat { border-right:none; border-bottom:1px solid var(--border); padding:0 0 16px; } .impact-stat:last-child { border-bottom:none; padding-bottom:0; } } /* ═══════════════════════════════════════════════════════════════ ARTICLE PROSE — long-form reading styles Used by: all blog articles inside
═══════════════════════════════════════════════════════════════ */ .article-prose { color:var(--text-body); font-size:17px; line-height:1.7; } .article-prose h2 { font-size:28px; margin:48px 0 16px; line-height:1.2; scroll-margin-top:96px; } .article-prose h2:first-child { margin-top:0; } .article-prose h3 { font-size:22px; margin:36px 0 12px; line-height:1.25; scroll-margin-top:96px; } .article-prose h4 { font-size:18px; margin:28px 0 10px; } .article-prose p { margin-bottom:20px; } .article-prose p strong { color:var(--ciq-dark); font-weight:600; } .article-prose a { color:var(--ciq-pink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .article-prose a:hover { color:var(--ciq-pink-hover); } .article-prose ul, .article-prose ol { margin:0 0 24px 0; padding-left:24px; } .article-prose li { margin-bottom:10px; line-height:1.7; } .article-prose li::marker { color:var(--ciq-pink); } .article-prose ul li strong, .article-prose ol li strong { color:var(--ciq-dark); } .article-prose table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; } .article-prose table th, .article-prose table td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; } .article-prose table thead th { background:var(--ciq-oatmeal); font-weight:600; color:var(--ciq-dark); border-bottom:2px solid var(--border); } .article-prose table tbody tr:hover { background:var(--ciq-oatmeal); } .article-prose .pull-quote { font-size:24px; font-weight:600; color:var(--ciq-dark); line-height:1.4; border-left:4px solid var(--ciq-pink); padding:8px 0 8px 24px; margin:32px 0; } .article-prose .checklist { background:var(--ciq-oatmeal); border-radius:var(--radius); padding:24px 28px; margin:24px 0; list-style:none; padding-left:28px; } .article-prose .checklist .checklist-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ciq-dark); margin-bottom:14px; display:block; } .article-prose .checklist li { padding-left:28px; position:relative; margin-bottom:10px; font-size:15px; } .article-prose .checklist li::before { content:""; position:absolute; left:0; top:7px; width:14px; height:14px; border:1.5px solid var(--text-secondary); border-radius:3px; } .article-prose .checklist li::marker { content:""; } /* ═══════════════════════════════════════════════════════════════ ARTICLE CALLOUT — oatmeal inset box with pink left border .callout--dark uses dark accent instead of pink ═══════════════════════════════════════════════════════════════ */ .callout { background:var(--ciq-oatmeal); border-left:4px solid var(--ciq-pink); padding:24px 28px; border-radius:var(--radius); margin:32px 0; } .callout-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ciq-pink); margin-bottom:8px; display:block; } .callout p { font-size:16px; margin-bottom:8px; } .callout p:last-child { margin-bottom:0; } .callout--pink { border-left-color:var(--ciq-pink); } .callout--pink .callout-label { color:var(--ciq-pink); } .callout--dark { border-left-color:var(--ciq-dark); } .callout--dark .callout-label { color:var(--ciq-dark); } /* ═══════════════════════════════════════════════════════════════ PROVIDER BLOCK — flat listicle card for comparison posts H3 provider name + right-aligned dark chip (category label). No border-radius outline — flat layout per v1.4 spec. ═══════════════════════════════════════════════════════════════ */ .provider-block { margin:48px 0 32px; } .provider-block:first-of-type { margin-top:32px; } .provider-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; } .provider-heading h3 { font-size:24px; margin:0; scroll-margin-top:96px; line-height:1.25; } .provider-block h4 { font-size:15px; font-weight:600; color:var(--ciq-dark); margin-top:24px; margin-bottom:10px; text-transform:none; letter-spacing:0; } .provider-block ul { padding-left:24px; margin-bottom:24px; } .provider-block .vs-section { background:var(--ciq-oatmeal); border-radius:var(--radius); padding:20px 24px; margin-top:20px; } .provider-block .vs-section h4 { margin-top:0; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ciq-pink); } .provider-block .vs-section p { font-size:15px; margin-bottom:12px; } .provider-block .vs-section p:last-child { margin-bottom:0; } /* ═══════════════════════════════════════════════════════════════ FAQ SECTION — accordion cards (Module R.1 variant) Used on: blog articles with FAQ schema. H2 centred above cards. ═══════════════════════════════════════════════════════════════ */ .faq-section { margin:64px 0 0; } .faq-section h2 { text-align:center; margin-bottom:32px; } .faq-card { font-family:var(--font); background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; transition:box-shadow .2s var(--ease); } .faq-card:hover { box-shadow:var(--shadow-md); } .faq-card summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 24px; } .faq-card summary::-webkit-details-marker { display:none; } .faq-card summary h3 { font-size:17px; font-weight:600; color:var(--ciq-dark); margin:0; line-height:1.4; } .faq-card[open] summary { padding-bottom:8px; } .faq-chevron { width:20px; height:20px; flex-shrink:0; transition:transform .25s var(--ease); } details[open] .faq-chevron { transform:rotate(180deg); } .faq-card-answer { padding:0 24px 24px; color:var(--text-secondary); font-size:15px; line-height:1.65; } .faq-card-answer p { margin-bottom:12px; } .faq-card-answer p:last-child { margin-bottom:0; } .faq-card-answer strong { color:var(--ciq-dark); font-weight:600; } .faq-card-answer ul { padding-left:18px; margin:8px 0; } .faq-card-answer ul li { margin-bottom:6px; } /* ═══════════════════════════════════════════════════════════════ BLOG ARTICLE — responsive breakpoints 1024px: sidebar collapses to top (full width); mobile TOC shows. 640px: prose font down, hero padding tighter, meta strip stacks. ═══════════════════════════════════════════════════════════════ */ @media (max-width:1024px) { .article-layout { grid-template-columns:1fr; gap:32px; padding:32px 24px 64px; } .toc-rail { position:static; max-height:none; padding-right:0; } .toc-rail nav { display:none; } .toc-rail .toc-label { display:none; } .read-next { margin-top:0; } .toc-disclosure { display:block; } .article-sidebar { position:static; max-height:none; padding-right:0; } } @media (max-width:640px) { .article-hero-image { padding:0 20px; } .article-prose { font-size:16px; } .article-prose h2 { font-size:24px; margin:36px 0 12px; } .article-prose h3 { font-size:19px; } .article-meta { flex-direction:column; align-items:flex-start; gap:12px; } .provider-heading { flex-direction:column; align-items:flex-start; gap:8px; } } /* Style guide */ .sg-banner { background:var(--ciq-dark); color:white; padding:48px 0; } .sg-banner h2 { color:white; } .sg-section { padding:64px 0; border-bottom:1px solid var(--border-light); } /* v1.6: sub-banners group modules within the library */ .sg-subbanner { background:var(--ciq-pink); color:var(--ciq-white); padding:18px 0; margin:48px 0 0; border-radius:8px; } .sg-subbanner .container { padding:0 32px; } .sg-subbanner h3 { font-size:18px; font-weight:600; color:var(--ciq-white); margin:0; letter-spacing:0.02em; } .sg-subbanner p { font-size:13px; color:rgba(255,255,255,.85); margin:4px 0 0; line-height:1.5; } .sg-subbanner--page-category { background:var(--ciq-dark); } .sg-subbanner--page-category h3 { color:var(--ciq-white); } .sg-subbanner--page-category p { color:rgba(255,255,255,.7); } .sg-label { display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); background:var(--ciq-oatmeal); padding:4px 12px; border-radius:4px; margin-bottom:24px; } .sg-type-sample { margin-bottom:32px; } .sg-type-meta { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; } .sg-type-meta span { font-size:12px; color:var(--text-muted); background:var(--ciq-oatmeal); padding:2px 8px; border-radius:3px; } .module-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ciq-pink); margin-bottom:8px; display:block; } .module-frame { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:48px; } .module-frame-header { background:var(--ciq-oatmeal); padding:12px 20px; font-size:12px; font-weight:600; color:var(--ciq-dark); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; } .module-frame-header .code { color:var(--ciq-pink); } .module-frame-body { padding:0; } .placeholder-img { background:var(--ciq-oatmeal); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13px; font-weight:500; } /* ═══════════════════════════════════════════════════════════════ ICON VARIANTS (4 versions — see Icon Variants showcase) Reference these by class name when building pages. ═══════════════════════════════════════════════════════════════ */ /* V1: Clean — no background, no border. Icon sits on whatever bg it's on. */ .icon-clean { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; } .icon-clean svg { width:32px; height:32px; } /* V2: White rounded square + pink icon. Use on dark or light bgs. */ .icon-box-white-pink { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--ciq-white); border-radius:12px; } .icon-box-white-pink svg { width:28px; height:28px; } /* V3: White rounded square + dark icon. Like the rocket pricing card. */ .icon-box-white-dark { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--ciq-white); border-radius:12px; } .icon-box-white-dark svg { width:28px; height:28px; } /* V4: Pink rounded square + white icon. */ .icon-box-pink-white { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--ciq-pink); border-radius:12px; box-shadow:0 8px 24px rgba(252,73,171,.25); } .icon-box-pink-white svg { width:28px; height:28px; } /* ─── --paired MODIFIER (NEW v1.9) ─────────────────────────────── Use ONLY when the icon-box is on a WHITE bg in a column whose PAIRED column has the SAME icon-box variant on a DARK bg. The border matches the outer shape of the dark-bg version so visual rhythm holds across the columns. The border colour matches the pairing pink/dark/pink. If there is no paired dark column with a matching icon-box, do NOT use --paired - the icon-box stands alone without a border. Reference example: pricing page v1.3 inclusions ("What's IN the box") - .icon-box-white-dark with rocket on dark left column, .icon-box-white-dark--paired with package on white right column. ───────────────────────────────────────────────────────────── */ .icon-box-white-pink--paired { border:1px solid var(--ciq-pink); } .icon-box-white-dark--paired { border:1px solid var(--border); } /* ═══════════════════════════════════════════════════════════════ CHECK MARK VARIANTS (5 versions) ═══════════════════════════════════════════════════════════════ */ /* V1: White outline circle + white check (use on dark bgs — like pricing) */ .check-circle-outline { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1.5px solid var(--ciq-white); border-radius:50%; flex-shrink:0; } .check-circle-outline svg { width:12px; height:12px; stroke:var(--ciq-white); } /* V2: Pink filled circle + white check */ .check-circle-pink { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--ciq-pink); border-radius:50%; flex-shrink:0; } .check-circle-pink svg { width:12px; height:12px; stroke:var(--ciq-white); } /* V3: Clean check — no circle, just stroke. Pink or white. */ .check-clean { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; flex-shrink:0; } .check-clean svg { width:20px; height:20px; } /* V4: White filled circle + dark check (use on dark bgs as an inverse alternative to V1). */ .check-circle-white { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--ciq-white); border-radius:50%; flex-shrink:0; } .check-circle-white svg { width:12px; height:12px; stroke:var(--ciq-dark); } /* V5 NEW v1.9: Dark filled circle + white check (use on light bgs as an inverse to V2 .check-circle-pink, where pink is reserved for accents). */ .check-circle-dark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; background:var(--ciq-dark); border-radius:50%; flex-shrink:0; } .check-circle-dark svg { width:12px; height:12px; stroke:var(--ciq-white); } /* ═══════════════════════════════════════════════════════════════ STEP NUMBER VARIANTS (2 colour variants × 2 content variants) Colour: --dark (default), --pink Content: numeric (default, base .step-number), icon (--icon) Combine freely: .step-number.step-number--dark .step-number.step-number--pink .step-number.step-number--dark.step-number--icon .step-number.step-number--pink.step-number--icon ═══════════════════════════════════════════════════════════════ */ .step-number--dark { background:var(--ciq-dark); color:var(--ciq-white); } .step-number--pink { background:var(--ciq-pink); color:var(--ciq-white); } /* NEW v1.9: --icon content modifier. Drops the digit typography and sizes the inner SVG for a clean icon render. Pair with --dark or --pink (the colour variants above) - this modifier only changes content sizing, not bg/fg colour. */ .step-number--icon { font-size:0; } .step-number--icon svg { width:18px; height:18px; stroke:var(--ciq-white); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ═══════════════════════════════════════════════════════════════ INLINE ICON SET — PARAGRAPH-HEIGHT (NEW v1.14) 18px circle / 10-11px glyph. Sits flush with 15px FAQ body text. Three families: tick, cross, num (number badge). Light-bg variants = FAQ answers, body copy on white / oatmeal. Dark-bg variants = body copy on dark sections only (NOT FAQs). Usage: inline-flex, vertical-align:middle, margin-right:8px. Always inline SVG — never img, base64 or emoji. ═══════════════════════════════════════════════════════════════ */ /* ── TICK — light backgrounds ─────────────────────────────────── */ /* ic-tick-pink: pink fill, white tick. Default for pros / confirmed items. */ .ic-tick-pink { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-pink); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-tick-pink svg { width:10px; height:10px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-tick-dark: dark fill, white tick. When pink is reserved for accents. */ .ic-tick-dark { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-dark); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-tick-dark svg { width:10px; height:10px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-tick-bare-pink: no circle, pink glyph only. Lighter visual weight. */ .ic-tick-bare-pink { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex-shrink:0; vertical-align:middle; } .ic-tick-bare-pink svg { width:14px; height:14px; stroke:var(--ciq-pink); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-tick-bare-dark: no circle, dark glyph only. */ .ic-tick-bare-dark { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex-shrink:0; vertical-align:middle; } .ic-tick-bare-dark svg { width:14px; height:14px; stroke:var(--ciq-dark); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ── TICK — dark backgrounds only (NOT for FAQs) ─────────────── */ /* ic-tick-white: white fill, dark tick. On dark sections. */ .ic-tick-white { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-white); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-tick-white svg { width:10px; height:10px; stroke:var(--ciq-dark); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-tick-outline: white stroke circle, white tick. On dark sections. */ .ic-tick-outline { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1.5px solid var(--ciq-white); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-tick-outline svg { width:10px; height:10px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ── CROSS — light backgrounds ────────────────────────────────── */ /* ic-cross-pink: pink fill, white cross. Use for cons / limitations. */ .ic-cross-pink { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-pink); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-cross-pink svg { width:9px; height:9px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-cross-dark: dark fill, white cross. When pink is reserved for accents. */ .ic-cross-dark { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-dark); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-cross-dark svg { width:9px; height:9px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-cross-bare-pink: no circle, pink cross glyph only. */ .ic-cross-bare-pink { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; flex-shrink:0; vertical-align:middle; } .ic-cross-bare-pink svg { width:12px; height:12px; stroke:var(--ciq-pink); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ic-cross-bare-dark: no circle, dark cross glyph only. */ .ic-cross-bare-dark { display:inline-flex; align-items:center; justify-content:center; width:12px; height:12px; flex-shrink:0; vertical-align:middle; } .ic-cross-bare-dark svg { width:12px; height:12px; stroke:var(--ciq-dark); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ── CROSS — dark backgrounds only (NOT for FAQs) ────────────── */ /* ic-cross-white: white fill, dark cross. On dark sections. */ .ic-cross-white { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:var(--ciq-white); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-cross-white svg { width:9px; height:9px; stroke:var(--ciq-dark); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ic-cross-outline: white stroke circle, white cross. On dark sections. */ .ic-cross-outline { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border:1.5px solid var(--ciq-white); border-radius:50%; flex-shrink:0; vertical-align:middle; } .ic-cross-outline svg { width:9px; height:9px; stroke:var(--ciq-white); fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } /* ── NUMBER BADGE (.ic-num + modifier) ────────────────────────── */ /* Base: 18px circle, 10px bold digit. Combine base + colour modifier. */ .ic-num { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; flex-shrink:0; vertical-align:middle; font-family:var(--font); font-size:10px; font-weight:700; line-height:1; } /* Light-bg colour modifiers */ .ic-num-pink { background:var(--ciq-pink); color:var(--ciq-white); } .ic-num-dark { background:var(--ciq-dark); color:var(--ciq-white); } .ic-num-offblack { background:var(--ciq-offblack); color:var(--ciq-white); } .ic-num-outline { background:transparent; color:var(--ciq-dark); border:1.5px solid var(--ciq-dark); } .ic-num-outline-pink { background:transparent; color:var(--ciq-pink); border:1.5px solid var(--ciq-pink); } /* Dark-bg colour modifiers (NOT for FAQs) */ .ic-num-white { background:var(--ciq-white); color:var(--ciq-dark); } .ic-num-outline-white { background:transparent; color:var(--ciq-white); border:1.5px solid var(--ciq-white); } /* .ic-num-pink works on dark backgrounds too (pink fills show on dark). */ /* ── INLINE ICON LIST PATTERN ─────────────────────────────────── */ /* Wrap a
    or
      with .ic-list. Each
    1. uses display:flex + gap. */ .ic-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .ic-list li { display:flex; align-items:center; gap:9px; font-size:15px; line-height:1.4; color:var(--text-secondary); } .ic-list li strong { color:var(--ciq-dark); font-weight:600; } /* ═══════════════════════════════════════════════════════════════ PRIMARY CTA BUTTONS WITH DARK CHIP ═══════════════════════════════════════════════════════════════ */ /* On-dark version: white pill, dark text, dark chip around white arrow. Hovers to pink (text + chip both update). Use on dark backgrounds. */ .btn-chip-on-dark { background:var(--ciq-white); color:var(--ciq-dark); padding:10px 10px 10px 24px; display:inline-flex; align-items:center; gap:14px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; transition:all .25s var(--ease); border:none; cursor:pointer; } .btn-chip-on-dark .chip { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:none; background:var(--ciq-dark); border-radius:8px; transition:all .25s var(--ease); } .btn-chip-on-dark .chip svg { width:16px; height:16px; stroke:var(--ciq-white); transition:all .25s var(--ease); } .btn-chip-on-dark:hover { background:var(--ciq-pink); color:var(--ciq-white); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-chip-on-dark:hover .chip { background:var(--ciq-white); } .btn-chip-on-dark:hover .chip svg { stroke:var(--ciq-pink); } /* Pink version: clean pink pill, white text, simple inline arrow (no chip — dark chip clashed with the bright pink). */ .btn-chip-pink { background:var(--ciq-pink); color:var(--ciq-white); padding:14px 28px; display:inline-flex; align-items:center; gap:10px; border-radius:var(--radius-pill); font-weight:600; font-size:15px; transition:all .25s var(--ease); border:none; cursor:pointer; } .btn-chip-pink svg { width:18px; height:18px; stroke:var(--ciq-white); transition:transform .2s var(--ease); } .btn-chip-pink:hover { background:var(--ciq-pink-hover); color:var(--ciq-white); text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md); } .btn-chip-pink:hover svg { transform:translateX(2px); } /* ═══════════════════════════════════════════════════════════════ FAQ VARIANTS (3 versions — all use native
      / for SEO + GEO friendliness. Answer text is always in the DOM.) ═══════════════════════════════════════════════════════════════ */ /* Shared chevron behaviour */ .faq-card, .faq-minimal, .faq-inline { font-family:var(--font); } .faq-card summary, .faq-minimal summary, .faq-inline summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; } .faq-card summary::-webkit-details-marker, .faq-minimal summary::-webkit-details-marker, .faq-inline summary::-webkit-details-marker { display:none; } .faq-chevron { width:20px; height:20px; flex-shrink:0; transition:transform .25s var(--ease); } details[open] .faq-chevron { transform:rotate(180deg); } /* V1: FAQ-Card — boxed white card with border. Best for dedicated FAQ pages. */ .faq-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden; transition:box-shadow .2s var(--ease); } .faq-card:hover { box-shadow:var(--shadow-md); } .faq-card summary { padding:24px 28px; } .faq-card summary h3 { font-size:17px; font-weight:600; color:var(--ciq-dark); margin:0; } .faq-card[open] summary { padding-bottom:8px; } .faq-card-answer { padding:0 28px 24px; color:var(--text-secondary); font-size:15px; line-height:1.65; } .faq-card-answer p { margin-bottom:12px; } .faq-card-answer p:last-child { margin-bottom:0; } .faq-card-answer strong { color:var(--ciq-dark); font-weight:600; } /* V2: FAQ-Minimal — divider lines only (ClickUp style). Footer / secondary. */ .faq-minimal-list { border-top:1px solid var(--border); } .faq-minimal { border-bottom:1px solid var(--border); } .faq-minimal summary { padding:24px 0; } .faq-minimal summary h3 { font-size:16px; font-weight:600; color:var(--ciq-dark); margin:0; } .faq-minimal-answer { padding:0 0 24px; color:var(--text-secondary); font-size:15px; line-height:1.65; max-width:90%; } /* V3: FAQ-Inline — flat help-guide style. Use in-article / mid-content. */ .faq-inline { margin-bottom:32px; } .faq-inline summary { padding:0; margin-bottom:12px; } .faq-inline summary h3 { font-size:18px; font-weight:600; color:var(--ciq-dark); margin:0; } .faq-inline-answer { color:var(--text-body); font-size:15px; line-height:1.65; } .faq-inline-answer p { margin-bottom:12px; } .faq-inline-answer strong { color:var(--ciq-dark); font-weight:600; } /* ═══════════════════════════════════════════════════════════════ HEADING TAG ANNOTATIONS (style guide only — for documentation) ═══════════════════════════════════════════════════════════════ */ .heading-tag { display:inline-block; font-family:var(--font); font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; margin-right:8px; vertical-align:middle; letter-spacing:.04em; } .heading-tag--h1 { background:#FC49AB; color:#fff; } .heading-tag--h2 { background:#2B2B2B; color:#fff; } .heading-tag--h3 { background:#6B6C6E; color:#fff; } .heading-tag--h4 { background:#8E8E93; color:#fff; } .heading-tag--span { background:transparent; color:var(--ciq-pink); border:1px solid var(--ciq-pink); } .heading-note { display:block; font-size:11px; color:var(--text-muted); margin-top:8px; font-style:italic; line-height:1.4; } /* ═══════════════════════════════════════════════════════════════ SEO + GEO RULES BLOCK styling ═══════════════════════════════════════════════════════════════ */ .seo-rules { background:var(--ciq-oatmeal); border-radius:var(--radius-lg); padding:40px; margin-bottom:32px; } .seo-rules h3 { margin-bottom:16px; } .seo-rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; } .seo-rule-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; } .seo-rule-card h4 { font-size:15px; margin-bottom:8px; color:var(--ciq-dark); } .seo-rule-card p, .seo-rule-card li { font-size:14px; color:var(--text-secondary); line-height:1.6; } .seo-rule-card ul { padding-left:18px; margin:0; } .seo-rule-card li { margin-bottom:4px; } .seo-rule-card code { background:var(--ciq-oatmeal); padding:2px 6px; border-radius:3px; font-size:12px; color:var(--ciq-dark); } .seo-pill { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:3px; margin-bottom:8px; } .seo-pill--seo { background:var(--ciq-dark); color:var(--ciq-white); } .seo-pill--geo { background:var(--ciq-pink); color:var(--ciq-white); } /* ═══════════════════════════════════════════════════════════════ MASTER NAV (MODULE A) — extra polish on top of base .nav rules Adds the chip CTA spacing, the text-link CTA, and the logo lockup. ═══════════════════════════════════════════════════════════════ */ .nav-cta-group { display:flex; align-items:center; gap:24px; } .nav-cta-text { font-size:15px; font-weight:500; color:var(--text-body); text-decoration:none; transition:color .2s var(--ease); background:none; border:none; padding:0; cursor:pointer; font-family:var(--font); } .nav-cta-text:hover { color:var(--ciq-pink); text-decoration:none; } .nav-logo-mark { display:inline-flex; align-items:baseline; line-height:1; text-decoration:none; } .nav-logo-mark:hover { text-decoration:none; } /* ═══════════════════════════════════════════════════════════════ CUSTOMER LOGO STRIP + G2 REVIEW STARS (MODULE C) For product pages — “Loved by People Teams” treatment. G2 stars are ALWAYS yellow (#FFB800). Do not recolour. ═══════════════════════════════════════════════════════════════ */ .logo-strip { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; } .logo-strip-item { display:flex; align-items:center; justify-content:center; height:40px; flex-shrink:0; } .logo-strip-item img { max-height:36px; width:auto; filter:none; opacity:1; } /* FIXED v1.23 (guide): was grayscale(100%)/opacity:.75 — contradicted this module's own "full colour, full opacity, never greyscale" rule. */ .logo-strip-item--colour img { filter:none; opacity:1; } .logo-strip-item svg { max-height:28px; width:auto; } .logo-strip-eyebrow { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); text-align:center; margin-bottom:24px; } /* G2 review stars block — always yellow stars, never restyled */ .g2-review { display:inline-flex; align-items:center; gap:12px; } .g2-stars { display:inline-flex; gap:2px; } .g2-stars svg { width:18px; height:18px; fill:#FFB800; } /* G2 yellow — locked */ .g2-review-meta { font-size:14px; font-weight:500; color:var(--text-body); display:inline-flex; align-items:center; gap:8px; } .g2-review-meta strong { color:var(--ciq-dark); font-weight:700; } .g2-logo { height:18px; width:auto; vertical-align:middle; display:inline-block; } /* Compact inline variant — stars + count + G2 mark on one line */ .g2-inline { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--text-body); } .g2-inline .g2-stars svg { width:16px; height:16px; } /* Loved-by headline used above logo strips */ .loved-headline { text-align:center; font-size:14px; font-weight:600; color:var(--ciq-dark); letter-spacing:.02em; margin-bottom:32px; } .loved-headline .text-pink { color:var(--ciq-pink); } @media (max-width:768px) { .feature-grid,.blog-grid { grid-template-columns:1fr; } .stats-row { grid-template-columns:repeat(2,1fr); } .steps { grid-template-columns:repeat(2,1fr); } /* .footer-grid responsive rules now handled in Module Q CSS block (900px and 600px breakpoints) */ .pricing-section { grid-template-columns:1fr; } .pricing-dark { border-radius:var(--radius-lg) var(--radius-lg) 0 0; } .pricing-light { border-radius:0 0 var(--radius-lg) var(--radius-lg); border-left:1px solid var(--border); } .nav-links { display:none; } .seo-rules-grid { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════ NEW COMPONENTS v1.9 These three components were introduced for the pricing page build (May 2026) and are now codified in the master design guide for reuse on other pages. ═══════════════════════════════════════════════════════════════ */ /* ─── .product-card (NEW v1.9, UPDATED v1.29 — moved to Full Width, 3 cards, all paid) ── Three-up paid product cards, Full Width category (edge-to-edge, 64px side padding, not the standard 1280px container — see .product-section below). Typical structure: - .icon-clean product mark + product name (h2) - One-line who-it's-for description (.product-card__lede) - Optional .product-card__stats strip (4 inline mini-stats on a dark band) - .product-card__features ul with check icons (single column, full card width) - .product-card__price block with price LEFT + .cs-meta-pill RIGHT, vertically centred (single currency, no EUR softline) - .product-card__cta-row at the bottom (1 or 2 CTAs) ───────────────────────────────────────────────────────────── */ .product-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; display:flex; flex-direction:column; position:relative; transition:box-shadow .2s var(--ease); } .product-card:hover { box-shadow:var(--shadow-md); } .product-card__chip-wrap { position:absolute; top:24px; right:24px; } .product-card h2 { font-size:28px; margin-bottom:8px; letter-spacing:-0.01em; } .product-card__lede { font-size:16px; color:var(--text-secondary); margin-bottom:24px; line-height:1.55; max-width:90%; } .product-card__stats { background:var(--ciq-dark); color:var(--ciq-white); border-radius:var(--radius); padding:16px 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:28px; } .product-card__stat { display:flex; flex-direction:column; gap:2px; } .product-card__stat-num { font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.1; color:var(--ciq-white); } .product-card__stat-num .pink { color:var(--ciq-pink); } .product-card__stat-label { font-size:11px; font-weight:500; color:rgba(255,255,255,.7); letter-spacing:.02em; line-height:1.2; } .product-card__features { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:16px; flex:1; } .product-card__feature { display:flex; gap:12px; align-items:flex-start; } .product-card__feature-icon { width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; margin-top:3px; } .product-card__feature-icon svg { width:18px; height:18px; stroke:var(--ciq-pink); stroke-width:2.5; } .product-card__feature-text strong { display:block; font-size:14px; font-weight:600; color:var(--ciq-dark); margin-bottom:2px; } .product-card__feature-text span { font-size:13px; color:var(--text-secondary); line-height:1.45; } .product-card__price { border-top:1px solid var(--border); padding-top:24px; margin-bottom:24px; } .product-card__price-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:10px; display:block; } .product-card__price-row { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; } .product-card__price-left { display:flex; align-items:baseline; gap:8px; } .product-card__price-amount { font-size:40px; font-weight:700; color:var(--ciq-dark); letter-spacing:-0.02em; line-height:1; } .product-card__price-period { font-size:16px; color:var(--text-secondary); font-weight:500; } .product-card__price-eur { font-size:15px; color:var(--text-muted); } .product-card__cta-row { margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; } .product-card__cta-row > * { flex:1; min-width:140px; justify-content:center; } @media (max-width:900px) { .product-card__stats { grid-template-columns:repeat(2,1fr); gap:16px 12px; } .product-card__price-row { justify-content:flex-start; } } /* ─── .data-source-card (NEW v1.9) ────────────────────────────── 4-up tertiary cards for "what powers your X" type contexts. Typical structure: - .data-source-card__header flex row at top: logo LEFT + .article-tag-chip RIGHT (chip acts as a signpost, same line) - h4 product/source name - One-line body p - .data-source-card__footer at bottom with thin divider above ───────────────────────────────────────────────────────────── */ .data-source-card { background:var(--ciq-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 24px; display:flex; flex-direction:column; transition:box-shadow .2s var(--ease); } .data-source-card:hover { box-shadow:var(--shadow-md); } .data-source-card__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; min-height:40px; } .data-source-card__logo { display:flex; align-items:center; } .data-source-card__logo img { max-height:32px; width:auto; } .data-source-card h4 { font-size:17px; font-weight:700; color:var(--ciq-dark); margin-bottom:8px; line-height:1.3; } .data-source-card p { font-size:14px; color:var(--text-secondary); line-height:1.5; margin:0 0 24px; } .data-source-card__footer { margin-top:auto; padding-top:24px; border-top:1px solid var(--border-light); font-size:12px; color:var(--text-muted); font-weight:500; } /* ─── .modal (NEW v1.9) ────────────────────────────────────────── Reusable iframe shell. Lazy-loads iframe src on first open. Closes on Esc, x button, and backdrop click. Default size 1040x920px (tuned for Calendly / form embeds without scroll). Pair with [data-modal-open="modalId"] triggers in markup and a small JS handler to add/remove .is-open and inject the iframe src on open. ───────────────────────────────────────────────────────────── */ .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:1000; opacity:0; transition:opacity .2s var(--ease); padding:20px; } .modal-backdrop.is-open { display:flex; opacity:1; } .modal { background:var(--ciq-white); border-radius:var(--radius-lg); width:100%; max-width:1040px; height:90vh; max-height:920px; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); position:relative; overflow:hidden; transform:translateY(8px); transition:transform .2s var(--ease); } .modal-backdrop.is-open .modal { transform:translateY(0); } .modal-close { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:var(--ciq-white); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:all .2s var(--ease); } .modal-close:hover { background:var(--ciq-oatmeal); border-color:var(--ciq-offblack); } .modal-close svg { width:16px; height:16px; stroke:var(--ciq-dark); stroke-width:2; } .modal-iframe-wrap { flex:1; position:relative; background:var(--ciq-white); } .modal-iframe-wrap iframe { width:100%; height:100%; border:0; display:block; } .modal-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:14px; } .modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--border-light); } .modal-header h3 { font-size:18px; margin:0; } .modal-body { flex:1; overflow:hidden; } .modal-body iframe { width:100%; height:100%; min-height:520px; border:none; display:block; } /* ═══════════════════════════════════════════════════════════════ LEGAL PAGES — Terms / Privacy Policy / DPA Single reading column at --read-width (760px). Section markers all use one flattened bold style: .legal-section-heading ═══════════════════════════════════════════════════════════════ */ .legal-page { padding:64px 0 96px; } .legal-wrap { max-width:var(--read-width); margin:0 auto; padding:0 32px; } .legal-page .display-h1 { margin-bottom:32px; } .legal-intro { font-size:18px; line-height:1.7; color:var(--text-body); margin-bottom:40px; } .legal-section-heading { display:block; font-size:19px; font-weight:700; color:var(--ciq-dark); line-height:1.3; margin:40px 0 14px; } .legal-section-heading:first-child { margin-top:0; } .legal-page p { font-size:16px; line-height:1.7; color:var(--text-body); margin-bottom:18px; } .legal-page p:last-child { margin-bottom:0; } .legal-page ul { margin:0 0 18px 0; padding-left:24px; } .legal-page ul li { margin-bottom:8px; line-height:1.7; color:var(--text-body); } .legal-page ul li::marker { color:var(--ciq-pink); } .legal-updated { margin-top:48px; padding-top:24px; border-top:1px solid var(--border-light); font-size:13px; color:var(--text-muted); } /* DATA TABLE — dark-header, wrap-friendly (DPA sub-processor lists) */ .data-table-wrap { margin:24px 0 32px; } table.data-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } table.data-table thead th { background:var(--ciq-dark); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ciq-white); padding:12px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.35; } table.data-table tbody td { padding:12px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-body); line-height:1.55; word-break:break-word; overflow-wrap:anywhere; } table.data-table tbody tr:last-child td { border-bottom:none; } table.data-table tbody td a { display:inline; margin-right:6px; } .data-table-note { font-size:13px; color:var(--text-muted); margin:-8px 0 24px; line-height:1.5; } /* ═══════════════════════════════════════════════════════════════════ HOMEPAGE MODULES ═══════════════════════════════════════════════════════════════════ */ /* Hero */ .hero { background:var(--ciq-dark); padding:80px 0 0; position:relative; overflow:hidden; } .hero::before { content:""; position:absolute; top:-80px; right:-80px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(252,73,171,.22) 0%, rgba(252,73,171,0) 65%); pointer-events:none; } .hero::after { content:""; position:absolute; bottom:0; left:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(130,60,180,.18) 0%, rgba(130,60,180,0) 60%); pointer-events:none; } .hero-inner { max-width:var(--max-width); margin:0 auto; padding:0 32px; position:relative; z-index:1; } .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:flex-end; } .hero-copy { padding-bottom:72px; } .hero-copy h1 { color:var(--ciq-white); margin-bottom:24px; } .hero-copy p.hero-sub { font-size:19px; line-height:1.6; color:rgba(255,255,255,.78); margin-bottom:36px; max-width:520px; } .hero-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:40px; } .hero-g2 { display:flex; align-items:center; gap:10px; } .hero-visual { display:flex; align-items:flex-end; } .hero-visual img { width:100%; border-radius:var(--radius-lg) var(--radius-lg) 0 0; display:block; box-shadow:0 -8px 40px rgba(0,0,0,.4); } /* Section wrappers */ .section { padding:80px 0; } .section--oatmeal { background:var(--ciq-oatmeal); padding:80px 0; } .section--white { background:var(--ciq-white); padding:80px 0; } .section--dark { background:var(--ciq-dark); padding:80px 0; } .section-header { text-align:center; max-width:680px; margin:0 auto 56px; } .section-header h2 { margin-bottom:16px; } .section-header p { font-size:18px; color:var(--text-secondary); line-height:1.6; } /* Logo strip section */ .logo-strip-section { padding:48px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light); } /* Feature split (image + text two-column) */ .feature-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .feature-split--reverse { } .feature-split--reverse .feature-split-visual { order:-1; } .feature-split-copy h2 { margin-bottom:16px; } .feature-split-copy p { font-size:17px; color:var(--text-secondary); line-height:1.65; margin-bottom:24px; } .feature-split-copy ul { list-style:none; padding:0; margin:0 0 32px; display:flex; flex-direction:column; gap:14px; } .feature-split-copy li { display:flex; align-items:flex-start; gap:12px; font-size:16px; color:var(--text-body); line-height:1.5; } .feature-split-copy li svg { width:18px; height:18px; flex-shrink:0; stroke:var(--ciq-pink); fill:none; margin-top:3px; } .feature-split-visual img { width:100%; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow-lg); } /* Testimonials grid */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } /* Trust strip */ .trust-strip { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; } .trust-strip-item img { height:44px; width:auto; opacity:.85; } /* Homepage responsive */ @media (max-width:1024px) { .hero-grid { grid-template-columns:1fr; gap:40px; } .hero-visual { display:none; } .hero-copy { padding-bottom:48px; } .feature-split { grid-template-columns:1fr; gap:40px; } .feature-split--reverse .feature-split-visual { order:0; } .testimonials-grid { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .section, .section--oatmeal, .section--white, .section--dark { padding:56px 0; } .testimonials-grid { grid-template-columns:1fr; } .stats-row { grid-template-columns:repeat(2,1fr); } .hero-copy h1 { font-size:clamp(32px,8vw,48px); } .trust-strip { gap:24px; } } /* ═══════════════════════════════════════════════════════════════════════════ PRODUCT PAGE MODULES (Module B variant, W, D.1/D.2, Y, S.5, P.2, N) Promoted 12 Jul 2026 from what the Salary Benchmarking and Job Architecture pages each needed as an embedded per-page