/* ============================================================ VARIANT-SHARED.CSS Supplements components.css with nav dropdowns, inline logo bands, mobile-toggle, and image sizing constraints that the marketing offering pages need but components.css doesn't ship. Linked by /modernization-with-ai-{a,b,c}. ============================================================ */ /* ============== HERO SCAFFOLD ============== These selectors live in components.css (the nav-and-scaffold file) but NOT in components-full.css (the extracted-from-design-system.html bundle). Without them the WebGL canvas falls to position:static and grows to its drawing-buffer size, pushing everything below it down the page by ~10,000px. */ .hero { position: relative; overflow: hidden; } .hero-bg-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: block; /* Per-page theme tints the inline plasma shader (which renders blue) via hue-rotate so each offering reads as its own colour without a full per-theme shader rewrite. data-theme on drives this. */ transition: filter 0.6s var(--ease-default); } /* Per-theme hue-rotate calibrated against shader baseline (~218 deg). See components.css for the calibration table. */ [data-theme="blue"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: none; } [data-theme="royal-blue"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: brightness(0.78) saturate(1.15); } [data-theme="deep-blue"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(27deg) saturate(1.05); } [data-theme="cyan"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(-19deg) saturate(1.0); } [data-theme="pink"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(96deg) saturate(1.1); } [data-theme="orange"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(166deg) saturate(1.1); } [data-theme="green"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(-140deg) saturate(0.9); } [data-theme="coral"] :where(.hero-bg-canvas, .hero-fluid-canvas) { filter: hue-rotate(142deg) saturate(1.1); } /* Per-theme hero-bg-tint. Used by hero BGs that inject a multiply-blend `.hero-bg-tint` sibling next to `.hero-bg-canvas` (currently only `fluid-ink`, but the contract is theme-aware so any future BG that needs a deep-color wash can reuse it). The tint colour matches each theme's accent so a fluid-ink hero on the pink offering reads as deep pink, on coral as deep red, etc., without per-page inline overrides. Source of truth = page-theme-bg-map.json themes block. */ .hero .hero-bg-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; } [data-theme="blue"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(28,62,160,0.95), rgba(6,12,38,0.98) 65%), linear-gradient(90deg, rgba(4,6,16,1), rgba(10,20,60,1)); } [data-theme="royal-blue"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(30,64,175,0.95), rgba(5,8,24,0.98) 65%), linear-gradient(90deg, rgba(3,5,15,1), rgba(8,16,46,1)); } [data-theme="pink"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(160,28,135,0.92), rgba(28,6,28,0.98) 65%), linear-gradient(90deg, rgba(16,4,12,1), rgba(48,8,40,1)); } [data-theme="orange"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(176,80,18,0.92), rgba(30,12,4,0.98) 65%), linear-gradient(90deg, rgba(14,6,2,1), rgba(48,22,6,1)); } [data-theme="green"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(108,138,22,0.92), rgba(14,22,4,0.98) 65%), linear-gradient(90deg, rgba(6,10,2,1), rgba(28,40,8,1)); } [data-theme="cyan"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(0,108,160,0.95), rgba(2,18,30,0.98) 65%), linear-gradient(90deg, rgba(2,8,14,1), rgba(6,28,52,1)); } [data-theme="deep-blue"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(20,42,108,0.95), rgba(4,8,28,0.98) 65%), linear-gradient(90deg, rgba(2,4,14,1), rgba(6,12,42,1)); } [data-theme="coral"] .hero .hero-bg-tint { background: radial-gradient(1600px 1100px at 80% 45%, rgba(176,32,32,0.92), rgba(28,6,8,0.98) 65%), linear-gradient(90deg, rgba(14,4,4,1), rgba(48,10,12,1)); } .hero-fade-left { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(5,5,12,0.8) 0%, rgba(5,5,12,0.4) 38%, transparent 72%); } /* ============== REVEAL FALLBACK ============== Default .reveal to fully visible. The IntersectionObserver in each variant page progressively enhances with the entrance animation — but if it misses an element (timing, off-viewport, threshold quirks), the content is still readable. Content first, animation as polish. */ .reveal { opacity: 1; transform: none; filter: none; } .reveal.in, .reveal.visible { opacity: 1; transform: none; filter: none; } /* ============== NAV: brand mark, dropdowns, mobile toggle ============== */ .nav-brand-mark { height: 22px; width: auto; flex-shrink: 0; display: block; } .nav-brand-name { font-family: var(--f-h); font-weight: 200; font-size: 18px; letter-spacing: 0.02em; } .nav-link-wrap { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, -8px); min-width: 280px; padding: 10px; background: rgba(8,12,20,0.96); border: 1px solid var(--border-h); border-radius: 14px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 1100; } .nav-link-wrap:hover .nav-dropdown, .nav-link-wrap:focus-within .nav-dropdown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .nav-dd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; transition: background 0.18s ease; } .nav-dd-item:hover { background: var(--accent-a08); } .nav-dd-text { display: flex; flex-direction: column; gap: 2px; } .nav-dd-title { font-family: var(--f-h); font-weight: 300; font-size: 14px; color: var(--text); letter-spacing: 0.01em; } .nav-dd-desc { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-m); } .nav-mobile-toggle { display: none; background: transparent; border: 1px solid var(--border-h); color: var(--text); font-size: 16px; padding: 6px 10px; border-radius: 8px; cursor: pointer; } @media (max-width: 980px) { .nav-mobile-toggle { display: inline-flex; align-items: center; } } /* ============== INLINE LOGO BAND (the .trust-strip-without-the-fixed) ============== */ /* Use this for an inline horizontal logo strip inside a section. .trust-strip is fixed-positioned and lives at the top of the viewport. Don't use .trust-strip inside a section. Use .logo-band instead. */ .logo-band { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); } .logo-band-track { display: flex; gap: 56px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 24px; } .logo-band-item { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; opacity: 0.78; transition: opacity 0.25s ease; } .logo-band-item:hover { opacity: 1; } .logo-band-item img { max-height: 32px; max-width: 140px; width: auto; height: auto; object-fit: contain; display: block; filter: brightness(0.95) contrast(0.92); } /* Marquee variant: continuous scroll for logo band */ .logo-band-marquee { mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); } .logo-band-marquee .logo-band-track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; animation: logoBandScroll 50s linear infinite; } @keyframes logoBandScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============== CREDENTIALS BAND (inline text + numbers band) ============== */ .cred-band { width: 100%; padding: 32px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--accent-a04); } .cred-band-track { display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1120px; margin: 0 auto; } .cred-band-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 140px; } .cred-band-item .n { font-family: var(--f-h); font-weight: 200; font-size: 32px; color: var(--aws); line-height: 1; } .cred-band-item .l { font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); white-space: nowrap; } /* ============== AWS BADGES ROW (inline, sized) ============== */ .aws-badges-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: center; max-width: 1120px; margin: 0 auto; padding: 0 24px; } .aws-badges-row img { height: 80px; width: auto; max-width: 96px; object-fit: contain; opacity: 0.92; transition: opacity 0.25s ease; } .aws-badges-row img:hover { opacity: 1; } @media (max-width: 580px) { .aws-badges-row img { height: 64px; max-width: 80px; } } /* ============== CASE-STUDY CARD GRID (offering pages) ============== Wraps .card-gradient-border (canonical) into a 3-up grid with slimmer padding than the canonical default for "Recent Results" sections. */ .cs-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 980px) { .cs-cards-grid { grid-template-columns: 1fr; } } .cs-cards-grid .card-gradient-border-inner { padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; height: 100%; } .cs-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .cs-card-head img { height: 28px; width: auto; max-width: 96px; object-fit: contain; opacity: 0.95; } .cs-card-client { font-family: var(--f-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); } .cs-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cs-card-tag { font-family: var(--f-m); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-s); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,0.025); } .cs-card-link { font-family: var(--f-m); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-bright); margin-top: auto; display: inline-flex; align-items: center; gap: 6px; } /* ============== TESTIMONIAL: real customer logos ============== Canonical .tm-sec/.tm-slide ships with .tm-logo-icon (Unicode char) and an empty .tm-avatar circle. Brands look better with real logos and stylized initial-circle avatars when stakeholder photos aren't available. */ .tm-logo { display: flex; align-items: center; gap: 12px; } .tm-logo-img { height: 24px; width: auto; max-width: 120px; object-fit: contain; opacity: 0.92; display: block; } .tm-logo-label { font-family: var(--f-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); } .tm-avatar.tm-avatar-init { background: linear-gradient(135deg, var(--accent-a26), var(--accent-cyan)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-h); font-weight: 200; font-size: 18px; color: var(--text); } /* ============================================================ 3 NEW TESTIMONIAL / CASE-STUDY COMPONENTS (2026-05) Patterns inspired by specifyapp, langchain, modal homepages. All implementations use canonical Armakuni tokens; no third-party code or assets reproduced. ============================================================ */ /* TESTIMONIAL SPLIT-CARD CAROUSEL — canonical entry lives in knowledge/brand/design-system/components.css. Mirrored here verbatim so offering pages (which load variant-shared.css instead of components.css) still get the rules. Keep the two copies in sync; the design-system manifest points at components.css. */ .tm-quote-section { padding: var(--space-section) 0; position: relative; z-index: 3; } .tm-quote-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 75% at center, rgba(8,12,20,0.72) 0%, rgba(8,12,20,0.35) 45%, rgba(8,12,20,0) 78%); pointer-events: none; z-index: 0; } .tm-quote-section > .wrap { position: relative; z-index: 1; } .tm-quote-head { text-align: center; margin-bottom: 36px; } .tm-quote-stage { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; height: 440px; overflow: hidden; /* Specifyapp-style edge fade — mirror of components.css. 8%→3%: prior fade was wide enough that the arrows (parked just inside the edge) sat fully in the alpha-faded zone and read as ghosted. */ mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%); } .tm-quote-arrow-side { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(123,198,255,0.55); background: rgba(13,17,28,0.96); color: var(--accent-bright); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 5; transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.08); } .tm-quote-arrow-side:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); box-shadow: 0 8px 26px rgba(123,198,255,0.32); } .tm-quote-arrow-side:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; } .tm-quote-arrow-side:active { transform: translateY(-50%) scale(0.94); } /* Push arrows inward into the gutter between the peek card and the active card. clamp() floors at 16px on tiny stages, ceilings at 56px on 1000px stages — always past the 3% mask alpha zone. */ .tm-quote-arrow-side[data-tmq-prev] { left: clamp(16px, 5.5%, 56px); } .tm-quote-arrow-side[data-tmq-next] { right: clamp(16px, 5.5%, 56px); } .tm-quote-card { position: absolute; top: 10px; left: 50%; width: clamp(560px, 70vw, 720px); height: 420px; display: grid; grid-template-columns: 280px 1fr; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.045) 100%), rgba(13,17,28,0.55); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.08); opacity: 0; transform: translateX(-50%); transition: transform 0.7s cubic-bezier(0.32, 0.72, 0.24, 1.06), opacity 0.5s var(--ease-default); pointer-events: none; will-change: transform, opacity; } .tm-quote-card.is-active { opacity: 1; transform: translateX(-50%); z-index: 3; pointer-events: auto; } .tm-quote-card.is-prev { opacity: 0.42; transform: translateX(calc(-50% - 100% - 24px)); z-index: 2; } .tm-quote-card.is-next { opacity: 0.42; transform: translateX(calc(-50% + 100% + 24px)); z-index: 2; } .tm-quote-card-left { position: relative; padding: 36px 28px 28px; display: flex; flex-direction: column; align-items: center; background-image: var(--card-gradient, radial-gradient(60% 80% at 0% 0%, rgba(45,98,255,0.32) 0%, rgba(255,255,255,0) 70%)); border-right: 1px solid var(--border); } .tm-quote-card-logo-wrap { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 14px 18px; /* No background. Customer logos are now white-on-dark variants and read directly on the card surface. The earlier white panel was needed back when full-color logos were inlined. */ } .tm-quote-card-logo { max-height: 56px; max-width: 180px; object-fit: contain; } .tm-quote-card-logo-text { font-family: var(--f-h, sans-serif); font-weight: 300; font-size: 13px; line-height: 1.4; text-align: center; color: var(--text-s, rgba(235,241,251,0.72)); } .tm-quote-card-label { font-family: var(--f-m); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-s); margin: 24px 0 18px; text-align: center; } .tm-quote-card-cta { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.94); color: rgb(13,17,28); padding: 8px 8px 8px 18px; border-radius: 999px; font-family: var(--f-b); font-weight: 500; font-size: 13px; text-decoration: none; transition: transform 0.2s var(--ease-default), background 0.2s var(--ease-default), box-shadow 0.2s var(--ease-default); } .tm-quote-card-cta:hover { background: var(--accent-bright); color: rgb(13,17,28); transform: translateX(2px); box-shadow: 0 0 24px rgba(123,198,255,0.32); } .tm-quote-card-cta-arrow { width: 22px; height: 22px; border-radius: 50%; background: rgb(13,17,28); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; } .tm-quote-card-right { padding: 36px 36px 32px; display: flex; flex-direction: column; color: var(--text); min-width: 0; } /* Optional headshot of the quote's attribution person. Wraps the name + role so the trio reads as one block. Source: customer-photos/{slug}/. onerror=this.remove() hides the avatar gracefully if the file 404s. */ .tm-quote-attrib { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .tm-quote-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--accent-bright, #7bc6ff) 30%, transparent); background: var(--surface-2, rgba(255,255,255,0.04)); } .tm-quote-attrib-text { min-width: 0; } .tm-quote-card-name { font-family: var(--f-b); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--text); margin: 0; } .tm-quote-card-role { font-family: var(--f-m); font-weight: 400; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); margin: 6px 0 28px; } .tm-quote-attrib + .tm-quote-card-body { margin-top: 28px; } .tm-quote-attrib .tm-quote-card-name { margin: 0; } .tm-quote-attrib .tm-quote-card-role { margin: 4px 0 0; } .tm-quote-card-body { font-family: var(--f-b); font-weight: 380; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--text); opacity: 0.92; margin: 0; } .tm-quote-dots { display: flex; justify-content: center; gap: 4px; margin-top: 24px; } .tm-quote-dot { /* The active state expands width 8→20px; transform-origin: center keeps the growth symmetric around the dot center so adjacent dots don't drift sideways on auto-rotate. Hit-zone padding stays transparent (~24px tap target). */ width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 8px; background-clip: content-box; box-sizing: content-box; /* Use `background-color` (longhand) on every state — `background` shorthand resets background-clip to border-box and inflates the paint to the full 24px hit-target. */ background-color: rgba(255,255,255,0.42); cursor: pointer; transition: background-color 0.25s var(--ease-default), width 0.3s var(--ease-default), border-radius 0.3s var(--ease-default); } .tm-quote-dot:hover:not(.is-active) { background-color: rgba(255,255,255,0.65); } .tm-quote-dot:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; } /* border-radius must exceed `padding` (8px) so the inset content-box corners stay rounded. 4px clamps the inset to 0 and paints a sharp rectangle. */ .tm-quote-dot.is-active { background-color: var(--accent-bright); width: 20px; border-radius: 999px; } @media (max-width: 760px) { .tm-quote-stage { height: auto; min-height: 580px; touch-action: pan-y pinch-zoom; } .tm-quote-card { /* 86vw leaves room for the stage's wrap-padding so the card never overflows + gets clipped on the edge. */ width: min(86vw, 560px); height: auto; min-height: 560px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .tm-quote-card.is-prev { transform: translateX(calc(-50% - 100% - 12px)); } .tm-quote-card.is-next { transform: translateX(calc(-50% + 100% + 12px)); } .tm-quote-card-left { padding: 28px 24px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .tm-quote-card-right { padding: 28px 24px; } .tm-quote-card-logo { max-height: 44px; max-width: 140px; } .tm-quote-arrow-side { width: 38px; height: 38px; font-size: 14px; } .tm-quote-arrow-side[data-tmq-prev] { left: clamp(8px, 4%, 28px); } .tm-quote-arrow-side[data-tmq-next] { right: clamp(8px, 4%, 28px); } } @media (prefers-reduced-motion: reduce) { .tm-quote-card { transition: opacity 0.2s linear; transform: none; } .tm-quote-card.is-active { transform: none; } } /* ============== CASE-STUDY SCROLLER (langchain pattern) ============== Horizontal scroll-snap rail of compact case-study tiles. Each tile has a customer logo, a one-line outcome metric, and a Read-use-case link. Below the rail: a More-customer-stories CTA. Above: a header row with the section heading on the left and prev/next arrow buttons on the right. Rail stays inside .wrap so the first card aligns with the heading. Edge mask softens the cards that scroll past the right edge. */ .cs-scroller-section { padding: 96px 0; position: relative; z-index: 3; } .cs-scroller-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .cs-scroller-nav { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; } .cs-scroller-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-h); background: rgba(13,17,28,0.85); color: var(--text); font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.25s, background 0.25s, color 0.25s, opacity 0.25s, transform 0.2s; } .cs-scroller-arrow:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); } .cs-scroller-arrow:active { transform: scale(0.95); } .cs-scroller-arrow:disabled { opacity: 0.32; cursor: not-allowed; } .cs-scroller-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 22vw, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 16px; -ms-overflow-style: none; scrollbar-width: none; scroll-behavior: smooth; /* Don't mask the right edge — cards must remain fully readable when partially visible. Arrow buttons signal "more available". */ } .cs-scroller-rail::-webkit-scrollbar { display: none; } .cs-scroller-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px; background: linear-gradient(180deg, rgba(13,17,28,0.94), rgba(8,11,20,0.94)); border: 1px solid var(--border-h); border-radius: var(--r-md); text-decoration: none; color: inherit; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; min-height: 240px; justify-content: space-between; isolation: isolate; position: relative; z-index: 1; } .cs-scroller-card:hover { border-color: var(--accent-a45); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 0 0 1px var(--accent-a18); } .cs-scroller-logo { display: flex; align-items: center; min-height: 32px; } .cs-scroller-logo img { height: 24px; width: auto; max-width: 132px; object-fit: contain; opacity: 0.9; filter: brightness(1) contrast(0.95); } .cs-scroller-logo-text { font-family: var(--f-h, sans-serif); font-weight: 300; font-size: 11px; line-height: 1.3; color: var(--text-s, rgba(235,241,251,0.72)); } .cs-scroller-headline { font-family: var(--f-h); font-weight: 300; font-size: 17px; line-height: 1.4; color: var(--text); margin: 0; } .cs-scroller-headline strong { color: var(--accent-bright); font-weight: 400; } .cs-scroller-link { font-family: var(--f-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-bright); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; } .cs-scroller-card:hover .cs-scroller-link { color: var(--text); } .cs-scroller-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-m); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-cyan); padding: 14px 22px; border-radius: 999px; border: 1px solid var(--accent-a26); background: var(--accent-a06); text-decoration: none; transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s; } .cs-scroller-more:hover { border-color: var(--accent-bright); background: var(--accent-a18); color: var(--accent-bright); transform: translateY(-1px); } /* ============== TESTIMONIAL RAIL (modal pattern) ============== Continuously auto-scrolling rail of compact testimonial cards. Cards are opaque to isolate from bg-continuity-lines. Hover pauses. Mark up the rail with two duplicate sets of cards inside .tm-rail-track so the keyframe animation can loop cleanly (translateX 0 -> -50%). */ .tm-rail-section { padding: 96px 0; position: relative; z-index: 3; } .tm-rail-viewport { width: 100%; overflow: hidden; margin-left: calc(-50vw + 50%); width: 100vw; /* fade in/out at the rail edges */ mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); } .tm-rail-track { display: flex; gap: 18px; padding: 12px 0; width: max-content; animation: tmRailScroll 60s linear infinite; will-change: transform; } .tm-rail-section:hover .tm-rail-track { animation-play-state: paused; } @keyframes tmRailScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .tm-rail-track { animation: none; } } /* Legacy .tm-rail (non-track) markup still works as a manual scroll-snap rail. */ .tm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 26vw, 360px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 0 24px; -ms-overflow-style: none; scrollbar-width: none; margin-left: calc(-50vw + 50%); width: 100vw; padding-left: max(24px, calc((100vw - 1120px) / 2)); padding-right: max(24px, calc((100vw - 1120px) / 2)); scroll-padding-left: max(24px, calc((100vw - 1120px) / 2)); } .tm-rail::-webkit-scrollbar { display: none; } .tm-rail-card { scroll-snap-align: start; flex: 0 0 clamp(300px, 26vw, 380px); display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; background: linear-gradient(180deg, rgba(13,17,28,0.96), rgba(8,11,20,0.96)); border: 1px solid var(--border-h); border-radius: var(--r-md); transition: border-color 0.3s, transform 0.3s; min-height: 240px; isolation: isolate; position: relative; z-index: 1; } .tm-rail-card:hover { border-color: var(--accent-a45); transform: translateY(-2px); } .tm-rail-head { display: flex; align-items: center; gap: 12px; } .tm-rail-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--accent-a26), var(--accent-cyan)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-h); font-weight: 200; font-size: 15px; color: var(--text); } .tm-rail-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tm-rail-name { font-family: var(--f-h); font-weight: 300; font-size: 14px; color: var(--text); letter-spacing: 0.01em; } .tm-rail-role { font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tm-rail-quote { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.65; color: var(--text-s); margin: 0; } .tm-rail-quote::before { content: '"'; color: var(--accent-bright); margin-right: 2px; } .tm-rail-quote::after { content: '"'; color: var(--accent-bright); margin-left: 2px; } .tm-rail-source { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-m); margin-top: auto; } /* ============== VARIANT MARKER PILL ============== */ .variant-marker { position: fixed; top: 14px; right: 14px; z-index: 1100; font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-bright); background: var(--accent-a18); border: 1px solid var(--accent-a45); padding: 6px 12px; border-radius: 999px; pointer-events: none; } /* ============== SAFETY: hard-cap any direct inside known card components ============== */ .feature-card-illus img, .ws-card-illus img, .illust-card-visual img, .scroll-card-img img, .bento-illus-side img, .blog-thumb img { max-width: 100%; height: auto; } /* .ind-card-img INTENTIONALLY EXCLUDED above. It is the full-bleed absolutely-positioned background of an industry card (defined in components-full.css §.ind-card §3216 with width:100% height:100% object-fit:cover). Putting it in the thumbnail group reset its height to auto, collapsing the image to its intrinsic square and leaving empty space below — the regression user reported 2026-05-17. */ .feature-card-illus { aspect-ratio: 16/10; overflow: hidden; } .feature-card-illus img { width: 100%; height: 100%; object-fit: contain; }