/* ToolkitStack landing/whitepaper — subtle motion & polish layer. Additive on top of tks-landing.css. All motion is gated behind prefers-reduced-motion: no-preference. The reveal "hidden" state only applies when has .tks-anim (added by JS), so no-JS visitors see everything. */ /* Self-hosted heading font (Hanken Grotesk, OFL licence) — small woff2 per weight, no external requests. To rebrand, drop in a new woff2 and change the family below. */ @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-grotesk-600.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/hanken-grotesk-700.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/hanken-grotesk-800.woff2") format("woff2"); } .tks-landing h1, .tks-landing h2, .tks-landing h3, .tks-landing h4, .tks-landing .tks-landing-eyebrow, .tks-landing .tks-hero-proof strong { font-family: "Hanken Grotesk", var(--tks-landing-font); } /* Tighter tracking on the large display headings. */ .tks-landing h1, .tks-landing .tks-landing-section h2 { letter-spacing: -0.015em; } /* AI section tag row spacing. */ .tks-landing .tks-ai-tags { margin-top: 26px; } /* ---- Hover micro-interactions (fine under reduced motion: user-initiated) ---- */ .tks-landing .tks-remediation-grid > article, .tks-landing .tks-pillar-grid > article, .tks-landing .tks-delivery-list > article, .tks-landing .tks-capability-row > article, .tks-landing .tks-fit-grid > article, .tks-landing .tks-wp-failure-grid > article, .tks-landing .tks-stat-card { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease; } .tks-landing .tks-landing-btn { transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, background-color .2s ease; } /* Sheen sweep across the primary buttons on hover. */ .tks-landing .tks-landing-btn--primary { position: relative; overflow: hidden; } .tks-landing .tks-landing-btn--primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%); background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%); } /* Condensing sticky header (already position: sticky in the base CSS). */ .tks-landing .tks-landing-header { transition: min-height .3s ease, padding-top .3s ease, padding-bottom .3s ease, background-color .3s ease, box-shadow .3s ease; } .tks-landing .tks-landing-header.is-condensed { min-height: 58px; padding-top: 8px; padding-bottom: 8px; background: rgba(13, 24, 39, .98); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); } /* Floating light-orbs canvas behind the dark hero, over a faint static base glow. */ .tks-landing .tks-landing-hero { position: relative; isolation: isolate; } .tks-landing .tks-landing-hero > * { position: relative; z-index: 1; } /* Static base glow (soft, well inside the hero so nothing clips the preview shadow). */ .tks-landing .tks-landing-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 52% at 85% 12%, rgba(124, 58, 237, .3), transparent 60%), radial-gradient(42% 48% at 6% 92%, rgba(59, 130, 246, .2), transparent 60%); } /* The drifting orbs. Higher specificity than `.tks-landing-hero > *` so it sits behind the hero content (z-index 0) rather than inheriting z-index 1. */ .tks-landing .tks-landing-hero .tks-hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* Whitepaper hero orbs (its hero is also dark navy). */ .tks-whitepaper .tks-wp-hero { position: relative; isolation: isolate; } .tks-whitepaper .tks-wp-hero > * { position: relative; z-index: 1; } .tks-whitepaper .tks-wp-hero .tks-hero-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; } /* Testimonials — 2-card row, styled with the existing design tokens. */ .tks-landing .tks-testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } .tks-landing .tks-testimonial { margin: 0; padding: 34px 34px 28px; background: var(--tks-landing-card); border: 1px solid var(--tks-landing-border); border-radius: var(--tks-landing-radius); box-shadow: var(--tks-landing-shadow); display: flex; flex-direction: column; gap: 22px; } /* Neutralise the base .tks-landing blockquote pull-quote styling (accent bar, padding, background, radius) — inside a card these must be plain text. */ .tks-landing .tks-testimonial blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 17.5px; line-height: 1.6; font-weight: 500; color: var(--tks-landing-ink); } .tks-landing .tks-testimonial blockquote::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1; color: var(--tks-landing-accent); margin: -4px 0 8px; } .tks-landing .tks-testimonial__by { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--tks-landing-border); } .tks-landing .tks-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; } .tks-landing .tks-testimonial__name { font-weight: 800; font-size: 15px; color: var(--tks-landing-ink); } .tks-landing .tks-testimonial__role { font-size: 14px; color: var(--tks-landing-muted); } .tks-landing .tks-testimonial-note { margin: 22px 0 0; font-size: 13.5px; color: var(--tks-landing-muted); } @media (max-width: 760px) { .tks-landing .tks-testimonial-grid { grid-template-columns: 1fr; } } /* "Everything handled for you" capability grid (Investment section). */ .tks-landing .tks-included { margin: 4px 0 46px; } .tks-landing .tks-included-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; } .tks-landing .tks-included-grid article { padding: 24px 22px; background: var(--tks-landing-card); border: 1px solid var(--tks-landing-border); border-radius: var(--tks-landing-radius); } .tks-landing .tks-included-grid h4 { margin: 0 0 14px; font-size: 15px; color: var(--tks-landing-ink); } .tks-landing .tks-included-grid .tks-check-list { gap: 9px; } @media (max-width: 900px) { .tks-landing .tks-included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tks-landing .tks-included-grid { grid-template-columns: 1fr; } } /* Sticky bottom CTA bar (landing + whitepaper). Self-styled so it can sit outside .tks-landing; visible at ALL times — pure CSS, no JS, no scroll or section conditions. */ .tks-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 14px 20px; flex-wrap: wrap; padding: 11px 20px; padding-bottom: max(11px, env(safe-area-inset-bottom)); /* Fully opaque: a fixed bar with backdrop-filter re-blurs the page behind it on every scroll frame (a mobile scroll-jank cause) — and at .97 the blur was invisible anyway. */ background: rgb(13, 24, 39); color: #fff; /* Sits outside .tks-landing, so it can't inherit the landing font — set it here. */ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; border-top: 1px solid rgba(255, 255, 255, .1); } .tks-sticky-cta__msg { font-weight: 600; font-size: 15px; } .tks-sticky-cta__btn { display: inline-block; background: #7c3aed; color: #fff; font-weight: 650; font-size: 15px; padding: 10px 20px; border-radius: 10px; text-decoration: none; white-space: nowrap; } .tks-sticky-cta__btn:hover { background: #5b21b6; } @media (max-width: 600px) { .tks-sticky-cta { gap: 0; } .tks-sticky-cta__msg { display: none; } } /* The new bar replaces the old mobile-only sticky button. */ .tks-landing .tks-sticky-mobile-cta { display: none !important; } /* The always-on fixed bar overlays the bottom edge — give the page tail room so the footer's last line is never permanently covered. */ .tks-landing-body .tks-landing-footer { padding-bottom: 84px; } /* Fix: the base CSS sets the comparison table's right cell to display:flex, which drops it out of the table layout and misaligns the column. Keep it a table-cell and lay the tick out inline instead. */ .tks-landing .tks-comparison-table td:last-child { display: table-cell; } .tks-landing .tks-comparison-table td:last-child .tks-comparison-tick { margin-top: 0; margin-right: 10px; vertical-align: -4px; } /* Founder bio photo in black & white. */ .tks-landing .tks-founder-photo img { filter: grayscale(1); } @media (prefers-reduced-motion: no-preference) { /* ---- Scroll reveal ---- */ html.tks-anim :is( .tks-landing-section .tks-section-heading, .tks-landing .tks-testimonial, .tks-landing .tks-included-grid > article, .tks-landing .tks-remediation-card, .tks-landing .tks-remediation-grid > article, .tks-landing .tks-pillar-grid > article, .tks-landing .tks-delivery-list > article, .tks-landing .tks-fit-grid > article, .tks-landing .tks-capability-row > article, .tks-landing .tks-stage-grid > li, .tks-landing .tks-stat-card, .tks-landing .tks-comparison-table-wrap, .tks-landing .tks-replace-panel, .tks-landing .tks-safeguard-panel, .tks-landing .tks-pricing-card, .tks-landing .tks-pricing-side > article, .tks-landing .tks-case-facts > div, .tks-landing .tks-founder-photo, .tks-landing .tks-founder-copy, .tks-landing .tks-faq-list details, .tks-landing .tks-contact-copy, .tks-landing .tks-landing-form, .tks-landing .tks-trust-strip, .tks-landing .tks-wp-section .tks-wp-wrap, .tks-landing .tks-wp-failure-grid > article, .tks-landing .tks-wp-steps > li ) { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--tks-rd, 0ms); /* No persistent will-change: promoting every reveal target to its own compositor layer permanently degrades scrolling. The transition alone animates the one-time reveal fine. */ } html.tks-anim .tks-is-visible { opacity: 1 !important; transform: none !important; } /* ---- Hover lifts ---- */ .tks-landing .tks-remediation-grid > article:hover, .tks-landing .tks-pillar-grid > article:hover, .tks-landing .tks-delivery-list > article:hover, .tks-landing .tks-capability-row > article:hover, .tks-landing .tks-fit-grid > article:hover, .tks-landing .tks-wp-failure-grid > article:hover, .tks-landing .tks-stat-card:hover { transform: translateY(-4px); box-shadow: var(--tks-landing-shadow); } .tks-landing .tks-landing-btn--primary:hover { transform: translateY(-1px); } .tks-landing .tks-landing-btn--primary:hover::after { animation: tks-sheen .8s ease; } @keyframes tks-sheen { from { transform: translateX(-130%); } to { transform: translateX(130%); } } /* ---- Aurora drift: gentle breathe + tiny drift (soft edges hide any spill) ---- */ .tks-landing .tks-landing-hero::before { animation: tks-aurora-a 19s ease-in-out infinite alternate; } .tks-landing .tks-landing-hero::after { animation: tks-aurora-b 23s ease-in-out infinite alternate; } @keyframes tks-aurora-a { from { opacity: .82; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(-3%, 3%, 0); } } @keyframes tks-aurora-b { from { opacity: .78; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(3%, -3%, 0); } } /* ---- Hero dashboard chart draws itself in ---- */ html.tks-anim .tks-line-chart__path { animation: tks-draw 1.4s cubic-bezier(.16, 1, .3, 1) .35s both; } @keyframes tks-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } html.tks-anim .tks-line-chart__point { opacity: 0; animation: tks-pop .5s ease-out forwards; } html.tks-anim .tks-line-chart__point--one { animation-delay: 1.05s; } html.tks-anim .tks-line-chart__point--two { animation-delay: 1.3s; } html.tks-anim .tks-line-chart__point--three { animation-delay: 1.55s; } @keyframes tks-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } } }