/* Site-wide component CSS.
Contains custom styles that Tailwind utility classes cannot express:
animations, complex hover effects, gradients, and multi-selector patterns.
This file is loaded on ALL pages via the global-styling library.
No Bootstrap overrides — Bootstrap has been removed entirely. */
/* ===================================================================
SCROLL REVEALS
Subtle fade + translate when elements enter the viewport.
Hidden state is scoped to html.js-reveal (added inline in )
so content stays visible when JS is disabled or fails to load.
Respects prefers-reduced-motion.
=================================================================== */
.js-reveal .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 500ms ease-out, transform 500ms ease-out;
will-change: opacity, transform;
}
.js-reveal .reveal.is-visible {
opacity: 1;
transform: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.js-reveal .reveal,
.js-reveal .reveal.is-visible {
opacity: 1;
transform: none;
transition: none;
}
}
/* ===================================================================
GRADIENT TEXT
=================================================================== */
.gradient-text {
background: linear-gradient(135deg, #10069f 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===================================================================
SCREENSHOT CARD — hover lift + deep shadow
=================================================================== */
.screenshot-card {
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.screenshot-card:hover,
.feature-card:hover .screenshot-card {
transform: translateY(-8px);
box-shadow: 0 32px 64px -12px rgba(16,6,159,0.18), 0 0 0 1px rgba(16,6,159,0.04);
}
.screenshot-card img {
width: 100%;
height: auto;
display: block;
}
/* ===================================================================
HERO GLOW — radial gradient behind hero screenshots
=================================================================== */
.hero-glow {
position: absolute;
width: 600px;
height: 400px;
background: radial-gradient(ellipse, rgba(16,6,159,0.08) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
/* ===================================================================
PLAY BUTTON — video overlay
=================================================================== */
.play-btn {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 9999px;
background-color: rgba(16, 6, 159, 0.8);
color: white;
border: none;
padding: 0;
cursor: pointer;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 640px) {
.play-btn { width: 5rem; height: 5rem; }
}
.play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 12px 40px rgba(16,6,159,0.3);
}
.play-btn svg {
width: 1.5rem;
height: 1.5rem;
margin-left: 0.25rem;
fill: currentColor;
}
@media (min-width: 640px) {
.play-btn svg { width: 1.75rem; height: 1.75rem; }
}
/* ===================================================================
CLIENT LOGO MARQUEE — infinite scroll
=================================================================== */
.marquee-wrapper {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
animation: marquee-scroll 35s linear infinite;
will-change: transform;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.logo-item {
flex-shrink: 0;
display: block;
max-height: 36px;
max-width: none !important;
width: auto !important;
height: auto !important;
object-fit: contain;
margin: 0 32px;
filter: grayscale(100%);
opacity: 0.6;
transition: filter 0.4s ease, opacity 0.4s ease;
}
.logo-item--square { max-height: 48px; }
.logo-item--tall { max-height: 56px; }
.logo-item:hover { filter: grayscale(0%); opacity: 1; }
@media (max-width: 1023px) {
.logo-item { max-height: 30px; margin: 0 24px; }
.logo-item--square { max-height: 40px; }
.logo-item--tall { max-height: 48px; }
}
@media (max-width: 639px) {
.logo-item { max-height: 22px; margin: 0 20px; }
.logo-item--square { max-height: 30px; }
.logo-item--tall { max-height: 36px; }
.marquee-track { animation-duration: 28s; }
}
.marquee-track .views-field { display: contents; }
/* ===================================================================
NAVIGATION
=================================================================== */
.nav-shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }
/* Mobile menu accordion */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.mobile-menu.open { max-height: 600px; }
/* Desktop dropdown menus (reusable: Features, More, or any future dropdown) */
.nav-dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown-trigger:hover .nav-dropdown,
.nav-dropdown:hover,
.nav-dropdown-trigger.is-open .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile submenus (reusable: Features, More, or any future accordion) */
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.mobile-submenu.open { max-height: 500px; }
/* ===================================================================
TIP BOX — gradient info callout inside feature cards
=================================================================== */
.tip-box {
background: linear-gradient(135deg, #eef2ff 0%, rgba(224,231,255,0.5) 100%);
}
.tip-box p { margin-bottom: 0; }
/* ===================================================================
FEATURE CARDS — alternating layout via nth-child
=================================================================== */
.homepage-features .feature-card { margin-bottom: 5rem; }
@media (min-width: 640px) {
.homepage-features .feature-card { margin-bottom: 7rem; }
}
.homepage-features .feature-card:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
.homepage-features .feature-card:nth-child(odd) .feature-text { order: 1; }
.homepage-features .feature-card:nth-child(odd) .feature-image { order: 2; }
.homepage-features .feature-card:nth-child(even) .feature-text { order: 2; }
.homepage-features .feature-card:nth-child(even) .feature-image { order: 1; }
}
a.feature-card:hover h3 { color: #10069f; transition: color 0.2s ease; }
.homepage-features > .views-row { display: contents; }
/* ===================================================================
RELEASE LISTING — partial preview with fade-out
Used on /releases index page (not on individual release detail pages).
=================================================================== */
.release-item {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #f0f4f8;
}
.release-item:last-child {
border-bottom: none;
}
.release-item .release-title {
font-size: 1.875rem;
font-weight: 800;
color: #10069f;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
@media (min-width: 640px) {
.release-item .release-title {
font-size: 2.25rem;
}
}
.release-item .release-actions {
margin-bottom: 1.5rem;
}
/* Preview container with fade-out overlay */
.release-preview {
position: relative;
max-height: 18rem;
overflow: hidden;
}
.release-preview::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 1) 100%);
pointer-events: none;
}
.release-read-more {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 1rem;
color: #10069f;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: color 0.2s ease;
}
.release-read-more:hover {
color: #0b0470;
}
.release-read-more svg {
width: 0.875rem;
height: 0.875rem;
transition: transform 0.2s ease;
}
.release-read-more:hover svg {
transform: translateX(2px);
}
/* ===================================================================
PAGER — site-wide pagination styling
Used on Views pages (releases, blog, etc.)
Targets both standard pager and mini pager (js-pager__items).
=================================================================== */
.pager__items,
.js-pager__items {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: 3rem 0 0;
padding: 0;
list-style: none;
}
.pager__items li,
.js-pager__items li {
list-style: none;
margin: 0;
padding: 0;
}
/* Style each pager cell — link or current page indicator */
.pager__items li a,
.js-pager__items li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.875rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #4b5563;
text-decoration: none;
background-color: #ffffff;
transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pager__items li a:hover,
.js-pager__items li a:hover {
border-color: #10069f;
color: #10069f;
background-color: rgba(16, 6, 159, 0.04);
}
/* Current page indicator — non-link list items */
.js-pager__items li:not(:has(a)),
.pager__item--current,
.pager__item.is-active {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.875rem;
border: 1px solid #10069f;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: #ffffff;
background-color: #10069f;
}
.pager__item--current a,
.pager__item.is-active a {
color: #ffffff;
border: none;
background: transparent;
min-width: 0;
height: auto;
padding: 0;
}
/* ===================================================================
BLOG CARD — contained panel with subtle hover
Reference: old design used padding, border, soft shadow on hover.
=================================================================== */
.blog-card {
display: block;
padding: 0.875rem;
border: 1px solid #f0f4f8;
border-radius: 0.625rem;
transition: transform 500ms ease, box-shadow 500ms ease, border-color 500ms ease;
}
.blog-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
border-color: #e2e8f0;
}
.blog-card img {
width: 100%;
height: auto;
display: block;
border-radius: 0.375rem;
}
.blog-card .blog-card-image {
margin-bottom: 0.875rem;
overflow: hidden;
border-radius: 0.375rem;
}
.blog-card h3 {
margin-bottom: 0.375rem;
}
/* ===================================================================
CAPTERRA REVIEW LINK — testimonial pill button
=================================================================== */
.capterra-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: hsla(0, 0%, 100%, 0.7);
border: 1px solid hsla(0, 0%, 100%, 0.2);
padding: 0.625rem 1.25rem;
border-radius: 9999px;
transition: border-color 0.2s ease, color 0.2s ease;
text-decoration: none;
background: transparent;
}
.capterra-link:hover {
border-color: hsla(0, 0%, 100%, 0.4);
color: hsla(0, 0%, 100%, 0.9);
text-decoration: none;
}
.capterra-link .capterra-stars { color: rgb(251, 191, 36); }
.capterra-link svg {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
stroke: currentColor;
}
/* ===================================================================
VIEWS WRAPPER NEUTRALIZATION
=================================================================== */
.view-clients,
.view-clients .view-content,
.view-features-homepage,
.view-features-homepage .view-content {
display: contents;
}
/* ===================================================================
PRICING TABS
=================================================================== */
.pricing-tab { color: #6B7280; background: transparent; cursor: pointer; }
.pricing-tab.active { color: #fff; background: #10069f; box-shadow: 0 1px 3px rgba(16,6,159,0.3); }
/* ===================================================================
FORM ELEMENTS — Drupal webform styling
=================================================================== */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="url"],
.webform-submission-form textarea,
.webform-submission-form select {
display: block;
width: 100%;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
padding: 0.625rem 1rem;
font-size: 1rem;
line-height: 1.5;
color: #111827;
background-color: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.webform-submission-form input:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
outline: none;
border-color: #10069f;
box-shadow: 0 0 0 3px rgba(16, 6, 159, 0.1);
}
.webform-submission-form textarea {
min-height: 10rem;
resize: vertical;
}
.webform-submission-form label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.375rem;
}
.webform-submission-form .form-item {
margin-bottom: 1rem;
}
.webform-submission-form .form-actions .button,
.webform-submission-form .form-actions input[type="submit"] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background-color: #10069f;
color: #fff;
font-weight: 600;
padding: 0.75rem 2rem;
border-radius: 0.75rem;
border: none;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.2s ease;
}
.webform-submission-form .form-actions .button:hover,
.webform-submission-form .form-actions input[type="submit"]:hover {
background-color: #0b0470;
}
.webform-submission-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25rem;
padding-right: 2.5rem;
}
/* Drupal status messages */
.messages--error {
background-color: #fef2f2;
border-left: 4px solid #ef4444;
color: #991b1b;
padding: 1rem;
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 1rem;
}
.messages--warning {
background-color: #fffbeb;
border-left: 4px solid #f59e0b;
color: #92400e;
padding: 1rem;
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 1rem;
}
.messages--status {
background-color: #f0fdf4;
border-left: 4px solid #22c55e;
color: #166534;
padding: 1rem;
border-radius: 0 0.5rem 0.5rem 0;
margin-bottom: 1rem;
}
/* ===================================================================
BLOG DETAIL PAGE — constrain page title width to match prose body
The shared page-title block uses max-w-4xl (896px) for all pages,
but blog full templates render the body at max-w-prose (~65ch),
so the title visibly overshoots the body width. Scope to blog only.
=================================================================== */
.page-node-type-blog .block-page-title-block > div {
max-width: 65ch;
}
/* ===================================================================
PROSE — styling for CKEditor-authored body content
=================================================================== */
/* Lead paragraph — author opt-in via in body content.
Used to give a closing thought, tagline, or article kicker visible weight
without resorting to a quote block or callout. Calm: bigger, darker,
slightly heavier — no rail, no border, no background. */
.prose p.lead,
.prose .lead {
font-size: 1.25rem;
line-height: 1.55;
color: #17105f;
font-weight: 500;
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.prose h2 { font-size: 1.875rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3; }
.prose h3 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; line-height: 1.3; }
.prose h4 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.5rem; line-height: 1.35; }
.prose h5 { font-size: 1.0625rem; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; line-height: 1.4; }
.prose h6 { font-size: 0.9375rem; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: #4b5563; }
.prose p { margin-bottom: 1.25rem; line-height: 1.75; }
.prose ul, .prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.5rem; }
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1.5rem 0; }
.prose a { color: #10069f; text-decoration: underline; }
.prose a:hover { color: #0b0470; }
.prose blockquote { border-left: 4px solid #e5e7eb; padding-left: 1rem; margin: 1.5rem 0; color: #6B7280; font-style: italic; }
.prose code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: #f9fafb; font-weight: 600; }
/* Badges in body content (e.g. "Breaking change" in release notes) */
.prose .badge,
.prose [class*="badge-"] {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
line-height: 1.4;
}
.prose .badge-warning {
background-color: #fef3c7;
color: #92400e;
}
.prose .badge-primary, .prose .badge-info {
background-color: #eef2ff;
color: #4338ca;
}
.prose .badge-danger {
background-color: #fef2f2;
color: #991b1b;
}
.prose .badge-success {
background-color: #f0fdf4;
color: #166534;
}
/* Buttons inside body content (e.g. "Book a demo" in pricing) */
.prose .btn,
.prose a.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
padding: 0.625rem 1.5rem;
border-radius: 0.75rem;
text-decoration: none;
transition: background-color 0.2s ease;
font-size: 0.9375rem;
}
.prose .btn-primary {
background-color: #10069f;
color: #fff;
}
.prose .btn-primary:hover {
background-color: #0b0470;
color: #fff;
}
.prose .btn-outline-primary {
border: 2px solid rgba(16, 6, 159, 0.3);
color: #10069f;
background: transparent;
}
.prose .btn-outline-primary:hover {
border-color: rgba(16, 6, 159, 0.6);
}
/* Callouts in body content (release notes / blog) — left-bordered info boxes.
Legacy markup form:
…
The Bootstrap-era `.show` class is a no-op and ignored. */
.prose .callout {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-left: 4px solid #cbd5e1;
border-radius: 0 0.5rem 0.5rem 0;
background-color: #f8fafc;
color: #334155;
}
.prose .callout > :first-child { margin-top: 0; }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout-info {
border-left-color: #4F46E5;
background-color: #eef2ff;
color: #3730a3;
}
.prose .callout-warning {
border-left-color: #f59e0b;
background-color: #fffbeb;
color: #92400e;
}
.prose .callout-success {
border-left-color: #22c55e;
background-color: #f0fdf4;
color: #166534;
}
.prose .callout-danger {
border-left-color: #ef4444;
background-color: #fef2f2;
color: #991b1b;
}
/* Embedded images and media in body content */
.prose .align-left { float: left; margin: 0 1.5rem 1rem 0; max-width: 50%; }
.prose .align-right { float: right; margin: 0 0 1rem 1.5rem; max-width: 50%; }
.prose .align-center { display: block; margin: 1.5rem auto; }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: 0.875rem; color: #6B7280; margin-top: 0.5rem; text-align: center; }
/* Embedded responsive containers (legacy video embeds) */
.prose .embed-responsive { position: relative; overflow: hidden; padding-top: 56.25%; margin: 1.5rem 0; border-radius: 0.75rem; }
.prose .embed-responsive iframe,
.prose .embed-responsive video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Horizontal rules */
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2rem 0; }
/* ===================================================================
IMAGE ZOOM OVERLAY — fullscreen lightbox for large images
=================================================================== */
.zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
z-index: 1000;
overflow: auto;
cursor: zoom-out;
}
.zoom-overlay img {
display: block;
max-width: none;
max-height: none;
width: auto;
height: auto;
padding: 1.5rem;
}
/* Cards in body content (legacy Bootstrap markup in CKEditor content) */
.prose .card {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow: hidden;
}
.prose .card-header {
background-color: #f9fafb;
padding: 0.75rem 1rem;
font-weight: 600;
font-size: 0.9375rem;
border-bottom: 1px solid #e5e7eb;
}
.prose .card-body {
padding: 1rem;
}
.prose .card-body > :last-child { margin-bottom: 0; }
/* ===================================================================
VIDEO PLAYER — poster overlay with play button
Generic wrapper for all embedded video media entities.
The homepage hero uses its own markup but the same .play-btn class.
=================================================================== */
.video-player {
position: relative;
border-radius: 0.75rem;
overflow: hidden;
margin: 1.5rem 0;
}
.video-player__poster {
position: relative;
cursor: pointer;
aspect-ratio: 16 / 9;
}
.video-player__poster .play-btn {
z-index: 1;
}
.video-player__video video {
display: block;
width: 100%;
height: auto !important;
}
/* Nested containers from legacy content — neutralize Bootstrap wrappers */
.prose .container { max-width: none; padding: 0; margin: 0; }
.prose .row { display: block; }
.prose [class*="col-"] { width: 100%; padding: 0; }
/* ===================================================================
ZOHO FORM EMBED — center iframe, prevent horizontal overflow
Zoho's inline