/** * biz-connector.css — shared design system for the per-connector landing pages * (/connectors/.html). Built on biz-tokens.css + biz-base.css; every * component here themes off a single per-page variable, --conn-accent, so each * connector page keeps ATS Pal's brand (navy/gold/Inter, shared header/footer) * while gaining its OWN colour + hero graphic + module arrangement. * * A page sets its identity on the (or a wrapper) with: * style="--conn-accent:#24A47A" * and optionally picks a hero graphic variant with a modifier class * (.conn-hero--mesh | --grid | --orbit) and arranges the modules below in its * own order. Nothing here is per-connector-specific — adapting a new connector * is: copy a page, swap the accent + logo + copy. */ .conn { /* Derived accent roles (fall back to brand blue if a page forgets to set it). */ --conn-accent: var(--color-brand-blue); --conn-accent-deep: color-mix(in srgb, var(--conn-accent) 78%, #000 22%); --conn-accent-tint: color-mix(in srgb, var(--conn-accent) 12%, #fff 88%); --conn-accent-line: color-mix(in srgb, var(--conn-accent) 24%, #fff 76%); --conn-accent-ink: color-mix(in srgb, var(--conn-accent) 62%, #0f172a 38%); } /* ─── HERO ────────────────────────────────────────────────────────────────── Dark navy base (brand) with an accent-tinted graphic layer, so the page reads "ATS Pal" first and "" through colour + logo lockup. */ .conn-hero { position: relative; overflow: hidden; background: var(--bg-hero); color: var(--fg-on-dark); padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-11); isolation: isolate; } .conn-hero::before { /* accent wash from the leading edge */ content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 12% -10%, color-mix(in srgb, var(--conn-accent) 55%, transparent) 0%, transparent 55%), radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--conn-accent) 22%, transparent) 0%, transparent 60%); opacity: 0.9; } /* Hero graphic variants — each page picks one for a distinct silhouette. */ .conn-hero--mesh::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: linear-gradient(color-mix(in srgb, var(--conn-accent) 26%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--conn-accent) 26%, transparent) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(80% 70% at 80% 20%, #000, transparent 70%); mask-image: radial-gradient(80% 70% at 80% 20%, #000, transparent 70%); } .conn-hero--grid::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.6; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--conn-accent) 18%, transparent) 0 2px, transparent 2px 16px); -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 65%); mask-image: linear-gradient(200deg, #000 10%, transparent 65%); } .conn-hero--orbit::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -20%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--conn-accent) 40%, transparent), transparent 62%); box-shadow: 0 0 0 60px color-mix(in srgb, var(--conn-accent) 10%, transparent), 0 0 0 140px color-mix(in srgb, var(--conn-accent) 6%, transparent); } /* Two-column hero: copy + a framed product/lifestyle image slot. On mobile the figure stacks under the copy. */ .conn-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-9); align-items: center; } .conn-hero__copy { max-width: 620px; } /* Lockup: + ATS Pal — two equal, legible logo chips joined by a connect glyph. The instant "this page is about X" cue (fix: chips are now large enough to read the connector's mark, not noise). */ .conn-lockup { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); margin-bottom: var(--space-6); } .conn-lockup__chip { display: inline-flex; align-items: center; justify-content: center; height: 46px; min-width: 46px; padding: 0 var(--space-3); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .conn-lockup__chip img { height: 26px; max-width: 118px; width: auto; object-fit: contain; display: block; } /* Monogram fallback for connectors without a logo asset — accent-filled tile. */ .conn-lockup__chip--mono { background: var(--conn-accent); color: #fff; font-weight: var(--fw-extrabold); font-size: 1.05rem; letter-spacing: 0.3px; } /* ATS Pal chip: transparent so the wordmark reads on the dark hero. */ .conn-lockup__chip--pal { background: transparent; box-shadow: none; padding-inline: var(--space-2); font-weight: var(--fw-extrabold); letter-spacing: -0.4px; font-size: 1.55rem; } .conn-lockup__chip--pal .a { color: #fff; } .conn-lockup__chip--pal .b { color: var(--color-brand-gold); } .conn-lockup__link { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; color: #fff; background: var(--conn-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--conn-accent) 30%, transparent); } .conn-hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: #fff; margin: 0 0 var(--space-5); } .conn-hero h1 .accent { color: color-mix(in srgb, var(--conn-accent) 55%, #fff 45%); } .conn-hero__sub { font-size: var(--fs-h4); color: var(--fg-on-dark-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--space-7); } .conn-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); } .conn-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-7); } .conn-hero__meta > span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); color: var(--fg-on-dark-muted); } .conn-hero__meta svg { color: color-mix(in srgb, var(--conn-accent) 55%, #fff 45%); flex: none; } /* Framed hero image slot — the customer/AI drops a text-free image here; while empty it shows an intentional accent-tinted placeholder so the layout never looks broken. */ .conn-hero__figure { position: relative; margin: 0; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid rgba(255,255,255,0.14); /* Solid brand navy matches the illustration's own background, so the square image reads as a full-bleed panel with no letterbox seam. */ background: var(--color-brand-blue); box-shadow: var(--shadow-modal); } .conn-hero__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .conn-figure__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: rgba(255,255,255,0.55); font-size: var(--fs-caption); text-align: center; padding: var(--space-6); } .conn-figure__ph svg { opacity: 0.7; } /* Accent button — the connector-coloured primary CTA (distinct from brand blue). */ .biz-btn--conn { /* --conn-cta-bg is computed per connector so white text clears WCAG AA 4.5:1; it equals --conn-accent when the raw accent already passes. [A11Y-02] */ background: var(--conn-cta-bg, var(--conn-accent)); color: #fff; padding: 14px 26px; font-size: var(--fs-body-sm); box-shadow: 0 4px 15px color-mix(in srgb, var(--conn-accent) 30%, transparent); } /* Hover must be darker than the (already accessible) default, not lighter -- previously hover was the only state that passed, which was backwards. */ .biz-btn--conn:hover { background: color-mix(in srgb, var(--conn-cta-bg, var(--conn-accent)) 85%, #000 15%); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--conn-accent) 40%, transparent); } /* ─── EYEBROW / SECTION accents ─────────────────────────────────────────── */ .conn .biz-eyebrow { color: var(--conn-accent-ink); } .conn-rule { width: 44px; height: 3px; border-radius: 3px; background: var(--conn-accent); margin: 0 0 var(--space-5); } /* ─── CONTEXT BAND (copy + image slot, alternating) ─────────────────────── */ .conn-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; } .conn-band--reverse .conn-band__media { order: -1; } .conn-band__copy h2 { font-size: var(--fs-h2); color: var(--fg-strong); line-height: var(--lh-snug); margin: 0 0 var(--space-4); } .conn-band__copy p { color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0 0 var(--space-5); } /* Light content image slot — text-free AI image goes here; placeholder shown while empty. */ .conn-figure { position: relative; margin: 0; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 16 / 11; border: 1px solid var(--color-line); background: linear-gradient(135deg, var(--conn-accent-tint) 0%, var(--color-surface-tint) 70%); box-shadow: var(--shadow-card); } .conn-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .conn-figure .conn-figure__ph { color: var(--conn-accent-ink); } /* ─── STEP FLOW (how it works, per connector) ───────────────────────────── */ .conn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); } .conn-step { position: relative; background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-xl); padding: var(--space-7); box-shadow: var(--shadow-card-soft); } .conn-step__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); font-weight: var(--fw-bold); font-size: var(--fs-caption); color: var(--conn-accent-deep); background: var(--conn-accent-tint); margin-bottom: var(--space-4); } .conn-step__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0 0 var(--space-2); } .conn-step__b { font-size: var(--fs-body-sm); color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0; } /* ─── WRITE-BACK MOCK (what lands back inside ) ───────────────── */ .conn-writeback { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-9); align-items: center; } .conn-wb-card { background: var(--bg-card); border: 1px solid var(--color-line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); overflow: hidden; } .conn-wb-card__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--conn-accent-tint); border-bottom: 1px solid var(--conn-accent-line); font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--conn-accent-ink); } .conn-wb-card__bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--conn-accent); } .conn-wb-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line-soft); } .conn-wb-row:last-child { border-bottom: 0; } .conn-wb-row__who { display: flex; flex-direction: column; gap: 2px; } .conn-wb-row__name { font-weight: var(--fw-semibold); color: var(--fg-strong); font-size: var(--fs-body-sm); } .conn-wb-row__meta { font-size: var(--fs-micro); color: var(--fg-muted); } .conn-score { font-weight: var(--fw-bold); font-size: var(--fs-body-sm); padding: 2px var(--space-3); border-radius: var(--radius-pill); } .conn-score--hi { color: var(--color-success-ink); background: var(--color-success-bg); } .conn-score--mid { color: var(--conn-accent-deep); background: var(--conn-accent-tint); } .conn-score--pal { color: #fff; background: var(--conn-cta-bg, var(--conn-accent)); } /* Write-back card: a ranked shortlist of 3 candidates, each with reasoning chips (a strength, and a gap for lower ranks) -- the comparison AND the why, fast. */ .conn-wb-cand { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line-soft); } .conn-wb-cand:last-child { border-bottom: 0; } .conn-wb-cand__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); } .conn-wb-cand__id { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; min-width: 0; } .conn-wb-cand__name { font-weight: var(--fw-bold); color: var(--fg-strong); font-size: var(--fs-body-sm); } /* "Pal Approved" sits by the name; the % score stays on the right like every row. */ .conn-wb-approved { font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-uppercase); color: #fff; background: var(--conn-cta-bg, var(--conn-accent)); padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; } .conn-wb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .conn-wb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: var(--fw-semibold); border: 1px solid var(--color-line); } .conn-wb-chip svg { flex: none; } .conn-wb-chip--strong { color: var(--color-success-ink); background: var(--color-success-bg); border-color: transparent; } .conn-wb-chip--partial { color: var(--color-brand-gold-deep); background: var(--color-brand-gold-soft); border-color: transparent; } .conn-wb-chip--missing { color: var(--fg-muted); background: var(--color-line-soft); border-color: transparent; } .conn-wb-copy h2 { font-size: var(--fs-h2); color: var(--fg-strong); line-height: var(--lh-snug); margin: 0 0 var(--space-4); } .conn-wb-copy p { color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0 0 var(--space-5); } .conn-wb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .conn-wb-list li { display: flex; gap: var(--space-3); font-size: var(--fs-body-sm); color: var(--fg-default); } .conn-wb-list svg { color: var(--conn-accent); flex: none; margin-top: 2px; } /* ─── FEATURE GRID ──────────────────────────────────────────────────────── */ .conn-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-8); } .conn-feature { padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-xl); background: var(--bg-card); } .conn-feature__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--conn-accent-tint); color: var(--conn-accent-deep); margin-bottom: var(--space-4); } .conn-feature__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--fg-strong); margin: 0 0 var(--space-2); } .conn-feature__b { font-size: var(--fs-body-sm); color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0; } /* ─── WHY ATS PAL + (differentiation, no competitor bashing) ── */ .conn-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); } .conn-why__col { border-radius: var(--radius-xl); padding: var(--space-7); } .conn-why__col--before { background: var(--color-surface-tint); border: 1px solid var(--color-line); } .conn-why__col--after { background: var(--bg-hero); color: var(--fg-on-dark); position: relative; overflow: hidden; } .conn-why__col--after::before { content:""; position:absolute; inset:0; background: radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--conn-accent) 40%, transparent), transparent 60%); z-index:0; } .conn-why__col > * { position: relative; z-index: 1; } .conn-why__k { font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: var(--ls-uppercase-wide); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); } .conn-why__col--before .conn-why__k { color: var(--fg-muted); } .conn-why__col--after .conn-why__k { color: var(--color-brand-gold); } .conn-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .conn-why-list li { display: flex; gap: var(--space-3); line-height: var(--lh-normal); } .conn-why__col--before li { color: var(--fg-default); } .conn-why__col--after li { color: #e8eefc; } .conn-why-list svg { flex: none; margin-top: 3px; } .conn-why__col--before svg { color: var(--fg-muted); } .conn-why__col--after svg { color: color-mix(in srgb, var(--conn-accent) 50%, #fff 50%); } /* ─── MINI FAQ (SEO — pairs with FAQPage JSON-LD) ───────────────────────── */ .conn-faq { display: grid; gap: var(--space-3); max-width: 820px; margin: var(--space-8) auto 0; } .conn-faq details { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--bg-card); padding: var(--space-5) var(--space-6); } .conn-faq details[open] { border-color: var(--conn-accent-line); box-shadow: var(--shadow-card-soft); } .conn-faq summary { cursor: pointer; list-style: none; font-weight: var(--fw-semibold); color: var(--fg-strong); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .conn-faq summary::-webkit-details-marker { display: none; } .conn-faq summary::after { content: "+"; color: var(--conn-accent); font-weight: var(--fw-bold); font-size: 1.2rem; line-height: 1; } .conn-faq details[open] summary::after { content: "\2212"; } .conn-faq p { margin: var(--space-4) 0 0; color: var(--fg-default); line-height: var(--lh-relaxed); } /* ─── CTA band ──────────────────────────────────────────────────────────── */ .conn-cta { background: var(--bg-hero); color: var(--fg-on-dark); border-radius: var(--radius-2xl); padding: var(--space-10); text-align: center; position: relative; overflow: hidden; } .conn-cta::before { content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 50% -20%, color-mix(in srgb, var(--conn-accent) 40%, transparent), transparent 60%); } .conn-cta > * { position: relative; } .conn-cta h2 { color: #fff; font-size: var(--fs-h1); margin: 0 0 var(--space-4); } .conn-cta p { color: var(--fg-on-dark-muted); max-width: 560px; margin: 0 auto var(--space-7); line-height: var(--lh-relaxed); } /* ─── RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .conn-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); } .conn-hero__copy { max-width: none; } .conn-hero__figure { aspect-ratio: 1 / 1; max-width: 480px; margin-inline: auto; } .conn-band { grid-template-columns: 1fr; gap: var(--space-7); } .conn-band--reverse .conn-band__media { order: 0; } } @media (max-width: 860px) { .conn-steps, .conn-features { grid-template-columns: 1fr; } .conn-writeback, .conn-why { grid-template-columns: 1fr; } .conn-hero h1 { font-size: var(--fs-h1); } .conn-hero { padding-top: calc(var(--header-height) + var(--space-8)); padding-bottom: var(--space-10); } } /* ─── MOTION SAFETY ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .conn-hero::before, .conn-hero::after { animation: none; } } /* ─── ALSO WORKS WITH (sibling connector cross-links) [SEO-06] ───────────── */ .conn-also__h { font-size: var(--fs-h3); color: var(--fg-strong); margin: 0 0 var(--space-5); } .conn-also { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .conn-also a { display: inline-block; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: #fff; color: var(--color-brand-blue); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: all var(--duration-base) var(--ease-soft); } .conn-also a:hover { border-color: var(--conn-accent); color: var(--conn-accent-ink); } .conn-also a:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); } /* ─── PROOF STRIP (94.7% + trust) — mirrors mockup-FINAL .mk-proof ────────── */ .conn-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); align-items: start; } .conn-proof__item { display: grid; gap: var(--space-2); } /* The three columns must line up: give every number cell the SAME height and bottom-align the glyphs, so the titles/bodies below share a baseline even though "94.7%" (2.5rem) is larger than the two word-stats (2rem). */ .conn-proof__item { align-content: start; } .conn-proof__n { display: flex; align-items: flex-end; min-height: 2.7rem; font-size: 2.5rem; line-height: 1; font-weight: var(--fw-extrabold); letter-spacing: -0.8px; color: var(--conn-accent-ink); } .conn-proof__n--sm { font-size: 2rem; letter-spacing: -0.4px; } .conn-proof__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--fg-strong); } .conn-proof__b { font-size: var(--fs-body-sm); color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0; } .conn-proof__b a { color: var(--conn-accent-ink); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 860px) { .conn-proof { grid-template-columns: 1fr; gap: var(--space-7); } } /* ─── WHERE THINGS STAND (status band) — cool-gray band, white cards, a 3px green top-rule + a small green check are the ONLY green (accent discipline). */ .conn-stand { background: var(--color-line-soft); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: var(--space-9) 0; } .conn-stand .biz-eyebrow { display: block; margin-bottom: var(--space-5); } .conn-stand__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .conn-stand__cell { display: flex; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid var(--color-line); background: #fff; border-top: 3px solid var(--color-success); box-shadow: var(--shadow-elev); } .conn-stand__ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-success) 14%, #fff 86%); color: var(--color-success-ink); } .conn-stand__k { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg-strong); margin-bottom: 4px; letter-spacing: -0.2px; } .conn-stand__b { font-size: var(--fs-body-sm); color: var(--fg-default); line-height: var(--lh-relaxed); margin: 0; } .conn-stand__b strong { color: var(--fg-strong); font-weight: var(--fw-semibold); } @media (max-width: 860px) { .conn-stand__grid { grid-template-columns: 1fr; } }